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江苏 传 智 播客 教育 科技 股份 有 限 公 司 ( 简 称 传 智 播客 ) 是 一 家 致力 于 培养 高 素质 软件 开 
发 人 才 的 科技 公司 ,“ 黑 马 程序 员 " 是 传 智 播客 旗下 高 端 IT 教育 品牌 。 

“黑马 程序 员 ” 的 学 员 多 为 大 学 毕业 后 , 想 从 事 IT 行业 ,但 各 方面 条 件 还 不 成 熟 的 年 轻 
人 .。“ 黑 马 程序 员 ” 的 学 员 筛 选 制度 非常 严格 ,包括 了 严格 的 技术 测试 .自学 能 力 测 试 , 还 包 
括 性 格 测试 .压力 测试 .品德 测试 等 。 百 里 挑 一 的 残酷 筛选 制度 确保 学 员 质 量 ,并 降低 企业 
的 用 人 风险 。 

自 “ 黑 马 程序 员 ?成 立 以 来 ,教学 研发 团队 一 直 致 力 于 打造 精品 课程 资源 ,不 断 在 产 、 
学 、 研 三 个 层面 创新 自己 的 执教 理念 与 教学 方针 ,并 集中 “黑马 程序 员 " 的 优势 力量 ,有 针 
对 性 地 出 版 了 计算 机 系列 教材 80 多 种 ,制作 教学 视频 数 十 套 ,发 表 各 类 技术 文章 数 
百 篇 。 

“黑马 程序 员 " 不 仅 斥资 研发 IT 系列 教材 ,还 为 高 校 师 生 提供 以 下 配套 学 习 资 源 与 
服务 。 


为 大 学 生 提 供 的 配套 服务 


1. 请 登录 “高 校 学 习 平 台 ”http://yx.ityxb. com, 免 费 获 取 海 量 学 习 资 源 ,帮助 高 校 学 
生 解 决 学 习 问 题 。 

2， 针对 高 校 学 生 在 学 习 过 程 中 存在 的 压力 等 问题 ,我 们 还 面向 大 学 生 量 身 打 造 了 “IT 
技术 女神 ”一 一 “ 播 妞 学 姐 ”, 可 提供 教材 配套 源码 和 习题 答案 ,以 及 更 多 IT 学 习 资源 ,同学 
们 快 来 关注 “ 播 妞 学 姐 ” 的 微 信 公 众 号 :boniu1024。 


“ 播 妞 学 姐 ” 微 信 公 众 号 


为 教师 提供 的 配套 服务 
针对 高 校 教 学 “黑马 程序 员 ? 为 IT 系列 教材 精心 设计 了 “教案 十 授课 资源 十 考试 系统 


互联 网 产品 设计 思维 与 实践 


十 题库 十 教学 辅助 案例 ”的 系列 教学 资源 ,高 校 老师 请 登录 “高 校 教 辅 平台 ”http://yx. 
ityxb. com 或 关注 码 大 牛 老师 微 信 /QQ:2011168841, 获 取 教 材 配 套 资 源 ,也 可 以 扫描 下 方 
二 维 码 ,加 入 专 为 IT 教师 打造 的 师资 服务 平台 一 一 “教学 好 助手 ”, 获 取 最 新 教师 教学 辅助 
资源 的 相关 动态 。 
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随 着 移动 互联 技术 的 飞速 发 展 ,“ 互 联网 十 "时 代 已 经 悄然 到 来 , 越 来 越 多 的 企业 投入 互 
联网 的 浪潮 中 ,互联 网 产品 的 种 类 也 琳琅 满目 一 一 淘宝 、 微 信 、 支 付 宝 、 爱 奇 艺 …… 互 联网 产 
品 在 给 入 们 带 来 便利 的 同时 ,也 在 改变 着 人 们 的 生活 方式 。 在 工作 中 ,与 互联 网 产品 相关 的 
岗位 种 类 繁多 一 一 产品 经 理 ,交互 设计 、UI 设计 …… 面 对 如 此 热门 的 行业 需求 ,许多 其 他 行 
业 的 从 业者 也 纷纷 加 入 到 互联 网 产品 的 队伍 中 。 


为 什么 要 学 习 本 书 

虽然 市 面 上 有 很 多 关于 互联 网 产品 的 书籍 ,但 大 多 偏重 理论 ,对 于 零 基 础 或 者 基础 偏 弱 
的 产品 从 业者 来 说 ,学 完 这 些 理论 后 仍然 是 一 头 雾 水 。 本 书 通过 理论 和 项 目 实践 相 结合 的 
方法 ,帮助 想 从 事 互 联网 产品 工作 的 人 从 入 门 到 实践 ,真正 摸 透 这 个 行业 ! 


如 何 使 用 本 书 

本 书 针对 互联 网 产品 设计 和 交互 领域 的 从 业 人 员 , 以 理论 十 案例 的 形式 组 织 知 识 点 。 
本 书 以 互联 网 产品 的 实现 流程 为 主线 ,详细 讲解 了 产品 基础 ,产品 设计 工具 、 需 求 、 产 品 规 
划 产品 原型 ,交互 设计 产品 迭代 等 知识 ,同时 以 一 个 互联 网 产品 综合 项 目 贯 穿 全 书 ,力求 
让 不 同 层次 的 读者 都 能 全 面 .系统 ,快速 地 掌握 产品 设计 的 相关 知识 ,真正 具备 设计 互联 网 
产品 的 实战 能 力 。 

本 书 分 为 8 章 , 其 中 第 1 章 介绍 互联 网 产品 基础 知识 ,第 2 章 介绍 Axure 工具 的 使 用 ， 
第 3 一 7 章 介 绍 产品 的 实现 ,第 8 章 介绍 产品 和 迭代。 各 章 的 主要 内 容 如 下 。 

。 第 1 章 介绍 互联 网 产品 的 相关 知识 ,包括 什么 是 互联 网 产品 .互联 网 产品 经 理 的 工 

作 内 容 、 常 用 的 互联 网 产品 设计 工具 以 及 互联 网 产品 设计 流程 等 。 

。 第 2 章 介 绍 Axure 工具 的 使 用 方法 。 

。 第 3 章 介绍 产品 立项 前 的 知识 ,包括 需求 获取 、 需 求 分 析 、 需 求 文档 等 。 

。 第 4 章 介 绍 产品 规划 ,包括 产品 结构 图 和 产品 业务 流程 图 。 

。 第 5 章 介 绍 低 保 真 原型 图 设计 和 产品 需求 文档 ,包括 低 保 真 原型 图 绘制 规范 、 绘 制 

方法 和 产品 需求 文档 撰写 方法 。 

。 第 6 章 介 绍 交 互 设计 ,包括 交互 设计 概述 、Axure 交互 设计 基础 等 。 

。 第 7 章 介 绍 设计 常识 和 产品 高 保 真 原型 图 制作 。 

。 第 8 章 介绍 产品 迭代 ,包括 产品 迭代 流程 网 站 结构 等 。 

本 书 以 综合 项 目 贯穿 全 书 , 语 言 通俗 易 懂 , 内 容 丰 富 .知识 涵盖 面 广 ,非常 适合 互联 网 产 
品 设计 的 初学 者 \ 互 联网 产品 经 理 以 及 互联 网 产品 设计 爱好 者 阅读 ,也 可 作为 大 学 选修 课 


互联 网 产品 设计 思维 与 实践 
教材 。 


意见 反馈 
本 书 的 编写 工作 由 传 智 播客 教育 科技 股份 有 限 公 司 黑马 程序 员 团队 完成 ,主要 参与 人 
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尽管 我 们 尽 了 最 大 的 努力 ,本 书 中 仍然 难免 有 不 妥 之 处 ,欢迎 各 界 专家 和 读者 朋友 提出 
宝贵 意见 ,我 们 将 不 胜 感 激 。 您 可 以 通过 电子 邮件 与 我 们 取得 联系 。 我 们 的 电子 邮件 是 
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第 工 曹 
认识 互联 网 产品 


学 习 目 标 

。 了 解 产品 ,能 够 区 分 实体 产品 和 互联 网 产品 的 差异 。 

。 熟悉 互联 网 产品 经 理 的 工作 内 容 。 

。 了 解 常用 的 互联 网 产品 设计 工具 ,知道 各 种 工具 的 功能 特点 。 
。 熟悉 互联 网 产品 的 设计 流程 ,知道 各 阶段 的 产 出 物 。 


在 科技 飞速 发 展 的 今天 ,互联 网 产品 遍布 于 生活 中 的 每 个 角落 一 一 支付 账单 、 手 机 音 
乐平 台 游戏 、 在 线 导航 、 有 声 小 说 等 ,各 种 各 样 的 互联 网 产品 给 人 们 的 生活 带 来 巨大 的 变 
化 。 虽然 人 们 每 天 都 使 用 互联 网 产品 ,但 是 对 于 互联 网 产品 的 定义 、 设 计 流 程 却 又 知之 其 
少 一 一 什么 是 互联 网 产品 ?这 些 互 联网 产品 又 是 由 谁 创造 的 ?本 章 对 互联 网 产品 的 基础 知 
识 做 详细 讲解 。 


1.1 产品 概述 


说 起 产品 ,其实 大 家 并 不 陌生 。 人 们 每 天 都 会 用 到 很 多 产品 ,但 是 产品 在 大 多 数 用 户 的 
心中 却 并 没有 一 个 具体 的 概念 。“ 这 个 东西 很 好 用 !”“ 这 个 东西 用 起 来 真 费 劲 !” 用 户 往 往 对 
产品 只 有 模糊 的 使 用 感受 , 却 并 不 知道 产品 是 什么 。 本 节 将 详细 讲解 产品 的 具体 定义 。 


1.1.1 什么 是 产品 


什么 是 产品 ?从 字面 意思 来 理解 ,产品 就 是 生产 出 来 的 物品 ,例如 汽车 制造 商 制造 的 汽 
车 ,印刷 厂 制作 的 图 书 \ 银 行 机 构 发 行 的 理财 产品 .软件 公司 开发 的 办 公 软 件 ,如 图 1-1 所 示 。 


RE NN 5S 30 天 务 
< 


A 6.0， 
k Ke J 参考 年 回报 率 
-A> 


汽车 图 书 理财 产品 办 公 软 件 
图 1-1 产品 


上 述 物 品 都 可 以 被 称 为 产品 。 但 是 汽车 、 图 书 与 理财 产品 、 办 公 软 件 相 比 ,前 者 是 有 形 
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的 ,而 后 者 是 无 形 的 。 当 然 ,它们 也 有 共同 点 , 即 这 些 产品 都 能 满足 用 户 在 某 些 层面 的 需求 。 
例如 ,汽车 可 以 满足 用 户 “ 提 高 出 行 效率 ”的 需求 ,理财 产品 可 以 满足 用 户 “ 获 取 更 多 利益 ”的 
需求 ,办 公 软 件 能 够 满足 用 户 “提高 办 公 效 率 ,节约 企业 成 本 ”的 需求 。 
可 见 , 产 品 是 指 能 够 供给 市 场 ,被 人 们 使 用 和 消费 ,并 能 满足 人 们 某 种 需求 的 任何 东西 
包括 有 形 的 物品 、 无 形 的 服务 ,组织 、 观 念 或 它们 的 组 合 。 根 据 产品 特性 的 不 同 , 通 常 可 以 将 
品 分 为 4 种 类 别 一 一 服务 产品 .软件 产品 ,硬件 产品 和 流程 性 材料 ,具体 介绍 如 下 。 


1. 服务 产品 

服务 产品 通常 是 无 形 的 ,是 为 满足 顾客 的 需求 , 供 方 (提供 产品 的 组 织 和 个 人 ) 和 顾客 
(接受 产品 的 组 织 和 个 人 ) 之 间 在 接触 时 的 活动 以 及 供 方 内 部 活动 所 产生 的 结果 ,并 且 是 在 
供 方 和 顾客 接触 时 至 少 需 要 完成 一 项 活动 所 产生 的 结果 。 例 如 ,医疗 、 运 输 、 咨 询 \ 旅 游 . 教 
育 等 都 是 服务 产品 。 图 1-2 所 示 的 58 速 运 就 是 运输 类 服务 产品 。 


图 1-2 运输 类 服务 产品 一 一 58 速 运 


2. 软件 产品 


软件 产品 由 计算 机 和 智能 设备 可 读 的 数字 信息 组 成 ,需要 硬件 平台 或 环境 的 支撑 。 软 
件 产品 通常 是 无 形 的 ,并 以 方法 .记录 或 程序 的 形式 存在 ,如 计算 机 程序 .信息 记录 等 。 
图 1-3 所 示 的 微 信 就 是 一 款 软件 产品 。 


图 1-3 微 信 


3. 硬件 产品 


硬件 产品 通常 是 有 形 产 品 ,可 以 作为 软件 产品 的 支撑 平台 和 环境 ,如 电视 机 、 元 器 件 、 建 
筑 物 、 机 械 零 部 件 等 。 硬 件 产品 具有 可 数 的 特性 ,往往 用 数量 描述 (例如 几 台 电视 机 、 几 个 零 


智能 电视 机 节目 
图 1-4 硬件 产品 和 软件 产品 


4. 流程 性 材料 


流程 性 材料 通常 是 有 形 产品 ,是 将 原材料 转化 成 某 一 特定 状态 的 有 形 产 品 ,其 状态 可 能 
是 流体 ` 气体、 粒状 ` 带 状 。 例 如 润滑 油 ,布匹 ,其 数量 具有 连续 .可 计量 的 特性 ,往往 用 计量 
值 描述 。 

值得 一 提 的 是 ,一 种 产品 可 以 由 多 个 不 同类 别 的 产品 构成 ,产品 类 别 的 区 分 主要 取决 于 
其 主导 成 分 。 例 如 ,汽车 是 由 硬件 (如 发 动机 ) 流程 性 材料 (如 汽油 )、 软 件 (如 行车 记录 仪 软 
件 ) 和 服务 (使 用 指南 \ 保 修 等 ) 组 成 的 。 


1.1.2 互联 网 产品 


随 着 互联 网 的 飞速 发 展 ,产品 衍生 出 一 个 新 的 概念 一 一 互联 网 产品 。 互 联网 产品 是 从 
传统 意义 上 的 产品 延伸 而 来 的 , 指 在 互联 网 环境 中 运营 ,用 于 满足 用 户 需 求 的 无 形 产品 。 从 
某 种 意义 上 讲 , 互 联网 产品 可 以 看 作 产 品 的 子 集 ,如 图 1-5 所 示 。 


产品 


图 1-5 互联 网 产品 和 产品 的 关系 


在 互联 网 大 环境 中 ,互联 网 产品 的 常见 形态 有 了 网站、 客户 端 \App 等 。 例 如 ,百度 网 站 、 
新 浪 微 博 、 腾 讯 QQ 等 都 是 人 们 熟知 的 互联 网 产品 ,如 图 1-6 一 图 1-8 所 示 。 


Bai 并 到 度 


-Es 


图 1-6 百度 网 站 
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热门 


图 1-7 新 浪 微 博 


1.1.3 互联 网 产品 的 分 类 


在 互联 网 这 个 大 环境 中 , 面 对 用 户 越 来 越 多 的 需求 ,互联 网 产品 的 种 类 也 越 来 越 丰富 。 
互联 网 产品 可 以 按照 不 同 的 维度 和 标准 分 类 ,具体 介绍 如 下 。 


1. 按 服务 对 象 分 类 


互联 网 产品 按 服务 对 象 可 以 分 为 以 下 两 类 : 

(1) 面向 个 人 用 户 的 产品 。 也 称 作 2C(to customer) 产 品 ,这 类 产品 往往 更 注重 用 户 的 
体验 (用 户 体验 就 是 用 户 使 用 产品 的 感受 ) ,如 腾讯 QQ ` 云 课堂 等 。 

(2) 面向 企业 的 产品 。 也 称 作 2B(to business) 产 品 ,这 类 产品 往往 更 注重 产品 的 商业 
价值 体现 ,如 用 友 财 务 软件 ,企业 邮箱 等 企业 办 公 软 件 。 


2. 按 运行 平台 分 类 


互联 网 产品 按 运行 平台 可 以 分 为 以 下 3 类 : 

(1) PC 端 产品 。PC(Personal Computer) 指 的 是 个 人 计算 机 。 作 为 最 初 的 互联 网 产品 
运行 环境 ,PC 非常 适合 一 些 即时 性 较 低 但 信息 量 大 ,功能 操作 复杂 的 产品 ,如 视频 编辑 类 、 
图 形 绘制 类 ,企业 服务 类 产品 。 

(2) 移动 端 产品 。 移 动 端 指 的 是 移动 设备 终端 ,一 般 是 手机 。 移 动 端 更 好 地 利用 了 用 
户 的 碎片 时 间 ,让 用 户 和 互联 网 更 紧密 地 结合 在 一 起 .符合 现代 用 户 的 生活 方式 。 常 见 的 移 
动 端 产品 有 App 软件 ,移动 Web 页 面 等 。 

(3) 其 他 智能 终端 产品 。 除 了 PC 和 移动 设备 终端 外 ,还 有 包括 iWatch、 车 载 导航 在 内 
的 其 他 智能 终端 ,但 是 目前 针对 这 些 智能 终端 的 产品 设计 并 非 主流 ,这 些 产 品 主要 通过 与 其 
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他 平台 产品 兼容 或 将 其 他 平台 产品 功能 简化 的 方式 存在 。 
3. 按 用 户 需求 分 类 


互联 网 产品 按 用 户 需求 可 以 分 为 以 下 5 类 : 

(1) 交易 类 产品 。 主 要 是 为 满足 各 类 交易 行为 线 上 化 所 衍生 的 互联 网 产品 形态 。 交 易 
类 产品 业务 内 容 包括 买卖 实体 商品 .虚拟 商品 以 及 各 类 服务 。 例 如 ,淘宝 .京东 、 美 团 等 都 属 
于 交易 类 产品 ,如 图 1-9 所 示 。 


汉王 由 匡 二 2 本 美加 


1-9 交易 类 产品 


淘宝 、 京 东 和 美 团 


(2) 社交 类 产品 。 主 要 是 满足 人 们 从 社会 生活 中 所 衍生 出 的 虚拟 社交 需求 的 互联 网 产 
品 形态 ,包括 社交 、 社 区 、 社 群 等 各 类 人 与 人 之 间 信 息 交 互 的 互联 网 产品 。 例 如 ,腾讯 QQ、 
微 信 、 人 人 网 等 都 属于 社交 类 产品 ,如 图 1-10 所 示 。 


UWA 人 人 网 


图 1-10 社交 类 产品 一 一 腾讯 QQ、 微 信和 人 人 网 


(3) 内 容 类 产品 。 主 要 为 用 户 提供 新 闻 行业 资讯 .百科 知识 等 内 容 。 例 如 ,搜狐 .新浪 
等 门户 网 站 都 属于 内 容 类 产品 。 

(4) 工具 类 产品 。 主 要 解决 用 户 在 某 种 特定 环境 下 的 即时 性 需求 ,因而 往往 需求 明确 ， 
产品 逻辑 比较 简单 。 在 工具 类 产品 的 用 户 群 中 ,用 户 使 用 产品 的 目的 性 都 很 强 。 例 如 ,墨迹 
天 气 、 有 道 词典 等 都 属于 工具 类 产品 ,如 图 1-11 所 示 。 


有 省 
有 道 词 典 


图 1-11 工具 类 产品 一 一 墨迹 天 气 和 有 道 词典 


(5) 娱乐 类 产品 。 这 类 产品 满足 的 用 户 需 求 往往 是 复杂 而 多 方面 的 ,因此 这 类 产品 衍 
生出 了 很 多 子 类 型 ,包括 图 片 .音乐 视频、 游戏 、 文 学 等 。 腾 讯 视频 、 网 易 游戏 ,小 说 中 文 网 
等 都 属于 娱乐 类 产品 。 


1.2 产品 经 理 


人 们 每 天 都 在 使 用 各 式 各 样 的 产品 .例如 ,使 用 水 杯 喝 水 ,使 用 手机 打 电 话 , 使 用 QQ 聊 
天 等 ,这 些 产 品 的 创造 者 就 是 产品 经 理 。 随 着 互联 网 对 人 们 工作 、 生 活 各 方面 的 影响 和 渗 
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透 ,互联 网 产品 经 理 的 地 位 也 变 得 越 来 越 重要 。 然 而 产品 经 理 的 概念 是 谁 提出 的 ? 产品 经 
理 的 发 展 经 过 哪些 阶段 ? 本 节 将 详细 介绍 产品 经 理 的 起 源 和 演变 。 


1. 产品 经 理 的 起 源 一 一 品牌 管理 制度 


产品 经 理 的 概念 最 早 是 由 美国 P&G( 宝 洁 ) 公 司 提 出 的 。1927 年 ,宝洁 公司 研发 并 开 
始 销售 佳美 牌 香皂 ,尽管 各 个 环节 都 非常 努力 ,也 投入 了 大 量 的 广告 费用 ,但 销售 业绩 一 直 
不 理想 。 负 责 销售 工作 的 麦克 … 爱 尔 洛 埃 向 公司 提出 一 种 品牌 一 个 经 理 的 建议 ,品牌 经 理 
制度 由 此 诞生 。 
随 着 宝洁 公司 进入 中 国 市 场 ,品牌 经 理 制 度 也 跟着 进入 ,并 且 迅 速 被 中 国企 业 仿 效 。 随 
着 时 间 的 推移 和 本 土管 理 模式 的 融合 ,品牌 经 理 在 职责 和 名 称 定义 上 也 发 生 了 变化 ,最 终 被 
产品 经 理 蔡 代 。 
产品 经 理 (Product Manager,PM) 是 企业 中 专门 负责 产品 管理 的 职位 。 产 品 经 理 负责 
市 场 调查 并 根据 用 户 的 需求 确定 开发 何 种 产品 ,选择 何 种 技术 、 商 业 模 式 等 ,并 推动 相应 产 
品 的 开发 。 同 时 产品 经 理 还 要 根据 产品 的 生命 周期 协调 研发 .营销 、 运 营 等 ,保证 产品 开发 
的 顺利 进行 。 产 品 经 理 职 位 的 发 展 历程 如 表 1-1 所 示 。 
表 1-1 产品 经 理 职位 的 发 展 历程 
时 间 历 程 
1927 年 美国 宝洁 公司 提出 品牌 经 理 制度 ,该 制度 被 推广 和 运用 ,并 取得 成 功 
1996 一 2000 年 中 国 互联 网 领域 (如 网 易 、 腾 讯 .搜狐 等 ) 诞 生 第 一 批 产品 经 理 
2003 一 2009 年 国内 部 分 公司 设立 产品 经 理 岗 位 ,引入 产品 经 理 概念 
2010 年 随 着 乔布斯 的 iPhone 火爆 全 球 ,产品 经 理 的 概念 开始 在 中 国 迅 速 传播 .普及 开 来 
2011 年 至 今 产品 经 理 制度 日 渐 成 熟 


通过 表 1-1 所 示 的 产品 经 理发 展 历程 的 时 间 节 点 可 以 看 出 ,中 国 的 产品 经 理 概 念 是 随 
着 互联 网 时 代 的 到 来 逐渐 形成 的 ,这 也 就 注定 了 互联 网 产品 经 理 和 传统 产品 经 理 的 差异 。 
2. 互联 网 产品 经 理 


在 互联 网 时 代 , 用 户 需求 和 用 户 体验 已 经 被 越 来 越 多 的 企业 所 重视 ,产品 经 理 制度 也 在 
行业 内 传播 开 来 。 互 联网 时 代 的 产品 经 理 被 赋予 了 新 的 职责 和 使 命 。 表 1-1 列举 了 传统 行 
业 产品 经 理 和 互联 网 产品 经 理 的 差异 。 


表 1-2 传统 行业 产品 经 理 和 互联 网 产品 经 理 的 差异 


比较 的 方面 传统 行业 产品 经 理 互联 网 产品 经 理 
面 对 的 行业 形态 成 熟 行业 新 兴 行 业 
创造 的 产品 实体 物品 虚拟 物品 
产品 迭代 周期 较 长 ( 几 年 甚至 更 长 ) 较 短 ( 几 个 月 到 一 年 ) 


通过 表 1-1 可 以 看 出 ,传统 行业 产品 经 理 面 对 的 行业 形态 较为 成 熟 , 产 品 已 经 基本 定 
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型 ,因此 需要 渐进 式 创 新 。 而 互联 网 产品 经 理 面 对 的 是 新 兴 的 行业 形态 ,因此 产品 需要 推 陈 
出 新 ,先入 为 主 地 占领 用 户 市 场 ,主导 用 户 习 惯 。 
3. 产品 经 理 职 级 表 


在 互联 网 行业 中 ,各 个 公司 对 产品 经 理 职级 的 划分 都 不 相同 。 在 一 些小 的 公司 ,产品 经 
理 的 职级 比较 简单 ,一 般 分 为 产品 助理 .产品 经 理 、 产 品 总 监 ;一 些 大 公司 往往 对 产品 经 理 的 
职级 有 精细 的 划分 。 表 1-3 描述 了 互联 网 产品 经 理 的 职级 。 


表 1-3 互联 网 产品 经 理 职级 


级 别 职 位 层次 具备 能 力 
pl 产品 助理 学 习 层 。| 入门 学 习 
P2 产品 专员 
细 分 方向 ,专项 

P3 产品 专员 执行 层 
P4 产品 经 理 独立 完成 某 一 方向 的 产品 功能 
Pp5 高 级 产品 经 理 

管理 层 。 | 独立 完成 某 一 方向 的 产品 功能 
P6 资深 产品 经 理 
P7 产品 总 监 规划 方向 ,指导 并 分 配 团队 工作 以 推进 
P8 高 级 产品 总 监 战略 层 。 | 研发 
P9 产品 VP( 副 总 裁 ) 战略 与 决策 


需要 注意 的 是 ,各 个 公司 对 产品 经 理 的 级 别 和 职位 的 划分 不 同 。 按 照 各 个 公司 的 不 同 
要 求 ,虽然 有 些 职位 的 名 称 一 样 ,所 做 的 工作 一 样 ,但 级 别 不 一 样 。 例 如 ,在 表 1-3 中 ,产品 
专员 这 一 职位 尽管 有 两 个 级 别 (P2 和 P3) ,但 工作 的 主要 内 容 是 一 致 的 。 


1.3 互联 网 产品 经 理 的 工作 内 容 


作为 整个 互联 网 产品 生命 线 的 创造 者 .组 织 者 和 管理 者 ,互联 网 产品 经 理 的 工作 看 似 琐 
碎 繁 杂 , 实 则 简单 ,概括 起 来 主要 包括 图 形 产 出 ,产品 管理 和 沟通 协调 3 部 分 。 本 节 将 从 这 
3 部 分 出 发 ,详细 介绍 产品 经 理 的 工作 内 容 。 
1.3.1 图 形 产 出 

图 形 产 出 并 不 是 指 产品 经 理 要 亲自 操 刀 设计 界面 ,产品 经 理 产 出 的 图 形 主 要 有 3 种 ,分 
别 是 产品 结构 图 .产品 流程 图 和 产品 原型 图 ,对 它们 的 具体 介绍 如 下 。 

1. 产品 结构 图 


产品 结构 图 是 综合 展示 产品 功能 和 页 面 结构 的 图 。 简 单 来 说 ,产品 结构 图 就 是 产品 原 
型 的 简化 表达 ,产品 具备 哪些 功能 ,有 多 少 页 面 都 可 以 通过 产品 结构 图 来 表现 。 图 1-12 为 
洗刷 刷 App* 快 速 入 口 ? 部 分 的 产品 结构 图 。 
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图 1-12 洗刷 刷 App“ 快 速 入 口 ”部 分 的 产品 结构 图 


产品 结构 图 能 够 在 产品 设计 前 期 的 需求 评审 或 其 他 类 似 场景 中 作为 产品 原型 的 替代 。 
产品 结构 图 相 较 于 产品 原型 ,其 实现 成 本 低 , 能 够 快速 对 产品 功能 结构 进行 增 、 删 \ 改 操作 ， 
降低 在 这 个 过 程 中 的 实现 成 本 。 常 用 的 产品 结构 图 绘制 工具 有 XMind、MindManager、 百 
度 脑 图 等 。 


2. 产品 流程 图 


产品 流程 图 是 用 特定 图 形 符号 描述 产品 流程 的 图 。 简 单 来 说 ,产品 流程 图 就 是 表示 先 
做 什么 、 后 做 什么 的 顺序 图 ,包含 开始 结束、 行动 ,状态 与 判断 的 功能 结构 组 合 。 图 1-13 为 
洗刷 刷 App 的 注册 登录 模块 流程 图 。 


注册 子 流程 


登录 子 流程 


进入 App 首 页 


图 1-13 洗刷 刷 App 的 注册 登录 模块 流程 图 
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和 产品 结构 图 相 比 ,产品 流程 图 最 大 的 优势 是 直观 、 细 致 ,可 以 帮助 产品 经 理 梳理 、 完 善 
用 户 的 操作 流程 ,降低 团队 成 员 之 间 的 沟通 成 本 。 常 用 的 产品 流程 图 绘制 工具 有 Visio、 
ProcessOn、Axure 等 。 


3. 产品 原型 图 


产品 原型 图 是 用 来 表达 产品 功能 和 内 容 的 示意 图 ,可 以 高 度 模拟 真实 产品 。 在 互联 网 
产品 设计 过 程 中 ,产品 原型 是 产品 设计 阶段 最 重要 的 产 出 物 之 一 ,汇集 了 产品 的 主要 功能 ， 
便于 产品 设计 人 员 直 观 地 认识 和 理解 产品 。 产 品 原型 图 主要 包括 低 保 真 和 高 保 真 两 种 , 具 
体 介绍 如 下 。 

1) 低 保 真 原型 图 

低 保 真 原型 图 也 称 线 框图 ,是 指 用 线 框 来 表示 功能 ,是 几乎 不 做 任何 视觉 效果 泻 染 的 产 
品 原型 图 ,通常 为 黑白 色 ,其 页 面 只 是 在 布局 、 功 能 模块 .信息 架构 等 方面 比较 精细 ,不 具备 
观赏 性 较 好 的 视觉 效果 。 图 1-14 为 洗刷 刷 App 标注 版 的 低 保 真 原型 图 。 
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图 1-14 洗刷 刷 App 标注 版 的 低 保 真 原型 图 


在 制作 低 保 真 原型 图 时 ,不 要 考虑 界面 元 素 的 形状 .配色 以 及 动画 效果 。 通 常 在 低 
保 真 原型 图 完成 后 ,产品 经 理 需 要 与 交互 设计 师 、UI 设 计 师 、 前 端 工 程 师 、 后 端 工 程 师 
以 及 测试 人 员 一 起 召开 设计 需求 评审 会 ,根据 评审 结果 ,需要 对 低 保 真 原型 图 进行 多 
轮 调整 ,直至 大 家 达成 一 致 结果 ,再 进行 后 面 的 工作 。 值 得 一 提 的 是 ,在 设计 低 保 真 原 
型 图 时 ,一 些 特殊 状态 与 错误 提示 都 标示 在 低 保 真 原型 设计 稿 中 ,例如 图 1-14 中 的 地 
在 实际 工作 中 , 低 保 真 原型 图 使 用 者 包括 需求 提出 人 、UI 设计 师 、 开 发 工程 师 和 测试 工 
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2) 高 保 真 原型 图 

高 保 真 原型 图 与 最 终 的 产品 效果 非常 接近 ,除了 没有 真实 的 后 台数 据 支撑 外 ,几乎 可 以 
模拟 前 端 界 面 的 所 有 功能 ,完全 是 一 个 高 仿 版 的 产品 。 通 常 也 把 高 保 真 原型 叫 作 产品 视觉 
稿 。 产 品 设计 者 可 以 为 高 保 真 原型 图 添加 页 面 跳 转 效果 与 简单 的 交互 效果 ,模拟 真实 产品 
的 使 用 场景 。 图 1-15 为 洗刷 刷 App 的 高 保 真 原型 图 。 


图 1-15 洗刷 刷 App 的 高 保 真 原型 图 


在 制作 高 保 真 原型 图 时 ,产品 设计 者 需要 在 低 保 真 原型 图 的 基础 上 配合 UI 设计 的 效 
果 图 ,在 界面 中 插入 真实 的 图 片 及 图 标 ,充分 利用 Axure 中 每 一 类 元 件 的 样式 及 专 有 的 交 
互 属性 ,以 提高 原型 图 的 保 真 度 。 
由 于 高 保 真 原型 图 的 制作 较为 复杂 ,因此 在 产品 设计 过 程 中 可 以 简化 或 者 省 略 。 高 保 
真 原型 图 一 般 只 有 在 公司 层面 的 汇报 或 者 产品 商务 演示 时 才 需 要 用 到 ,使 用 者 包括 高 层 领 
导 、 老 板 、 投 资 人 以 及 其 他 重要 决策 人 。 
1.3.2 产品 管理 

产品 管理 是 指 在 产品 实现 过 程 中 对 各 阶段 产品 目标 的 监管 和 控制 ,其 目的 是 保证 产品 的 顺 
利 实现 。 由 于 产品 实现 是 一 个 复杂 的 过 程 ,涉及 对 市 场 的 认识 、 对 产品 技术 的 了 解 、 对 企业 资源 
的 调配 等 各 个 方面 。 如 果 在 产品 实现 过 程 中 缺乏 相应 的 管理 ,就 很 难 达 到 预期 的 目标 。 在 实际 
工作 中 ,产品 经 理 的 管理 工作 主要 体现 在 两 方面 一 一 需求 管理 和 项 目 管理 ,具体 介绍 如 下 。 


1. 需求 管理 

需求 管理 就 是 调研 用 户 需求 ,将 用 户 需求 转化 为 产品 需求 ,并 保证 产品 需求 功能 得 以 实 
现 的 过 程 ,包括 需求 的 收集 、 分 析 筛选 ,需求 实现 等 (关于 “需求 ”将 会 在 第 3 章 详细 讲解 ,这 
里 了 解 即 可 )。 产 品 经 理会 在 这 一 阶段 评估 需求 的 可 行 性 \ 优 先 级 和 需求 负责 人 。 


2. 项 目 管理 


项 目 管理 是 指 在 项 目 实现 过 程 中 运用 知识 ,技能 .工具 ,方法 ,使 项 目 能 够 在 有 限 的 资源 
条 件 下 实现 项 目 目标 。 在 项 目 管理 过 程 中 ,产品 经 理 往往 会 和 项 目 经 理 配合 。 前 者 主要 从 
宏观 层面 规划 整个 产品 的 架构 和 发 展 路 线 , 保 证 产品 的 生命 周期 .市场 利润 ;后 者 更 注重 的 
是 产品 项 目的 实现 过 程 的 控制 力 和 执行 力 ,保证 项 目 目 标的 顺利 实现 。 


1.3.3 沟通 协调 


沟通 和 协调 是 产品 经 理 又 一 项 重要 的 工作 内 容 。 在 产品 的 实现 过 程 中 ,需要 各 个 部 门 
的 相互 配合 。 产 品 经 理 虽然 不 能 直接 领导 其 他 部 门 ,但 经 常 需要 协调 各 部 门 的 工作 ,因此 产 
品 经 理 的 沟通 和 协调 能 力 就 显得 尤为 重要 。 

1. 沟通 

良好 的 沟通 是 贯彻 落实、 完成 项 目的 必要 条 件 ,能 够 让 产品 经 理 的 想法 及 时 、 准 确 地 上 
传 和 下 达 , 避 免 他 人 的 主观 腾 断 ,为 产品 的 实现 创造 安全 、 顺 畅 的 环境 。 如何 有 效 地 传达 想 


法 就 是 产品 经 理 沟通 能 力 的 体现 。 例 如 ,产品 经 理 可 以 将 一 些 专 业 术 语 或 内 容 通过 举例 或 
图 形 化 的 方式 展示 给 非 技 术 部 门 。 一 个 优秀 的 产品 经 理 一 定 是 一 个 高 效 的 沟通 者 。 


2. 协调 


产品 的 实现 需要 各 个 部 门 (如 设计 、 研 发 .运营 ,测试 等 ) 的 相互 配合 ,如 图 1-16 所 示 。 
如 何 协调 各 部 门 之 间 的 工作 ,保证 产品 按照 既定 的 目标 顺利 进行 ,是 产品 经 理工 作 能 力 的 另 
一 体现 。 产 品 经 理 的 协调 工作 主要 包括 制订 项 目 计划 进行 资源 协调 跟踪 项 目 进展 等 。 


1-16 产品 经 理 协 调 工 作 涉及 的 部 门 和 人 员 


需要 注意 的 是 ,在 大 型 公司 里 ,通常 会 由 项 目 经 理 来 处 理 大 部 分 项 目 管理 协调 工作 , 产 
品 经 理 只 需 提 供 支持 和 建议 。 而 在 创业 公司 里 ,产品 经 理 通常 需要 自己 进行 项 目 协调 管理 。 


1.4 产品 设计 行业 术语 


作为 刚刚 进入 产品 设计 领域 的 新 人 .了解 一 些 常 用 的 行业 术语 是 必要 的 。 只 有 了 解 了 
基本 的 行业 术语 ,才能 便于 行业 内 部 交流 。 下 面 从 企业 架构 、 电 商业 务 模式 ,文档 体系 、 产 品 
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版 本 4 个 方面 详细 讲解 产品 设计 行业 的 相关 术语 。 
1. 企业 架构 


这 里 主要 介绍 互联 网 企业 常见 的 职级 和 设计 部 门 , 如 表 1-4 所 示 。 


表 1-4 互联 网 企业 职级 和 设计 部 门 


名 称 描 述 
CEO 首席 执行 官 ,是 企业 的 法 人 代表 
COO 首席 运营 官 ,主要 负责 公司 的 运作 和 管理 
CFO 首席 财务 官 ,类 似 于 财务 总 经 理 
CTO 首席 技术 官 ,类 似 于 总 工程 师 
VP 副 总 裁 ,包括 技术 副 总 裁 . 财 务 副 总 裁 等 
PM 产品 经 理 和 项 目 经 理 都 称 为 PM, 负责 产品 或 项 目的 整个 生产 周期 
UI 用 户 界面 设计 
ID 交互 设计 ,有 时 候 为 区 别 于 工业 设计 ,会 写作 IxD 
UE 用 户 体验 设计 
2. 电 商 业务 模式 


常见 的 电 商业 务 模 式 有 4 种 ,如 表 1-5 所 示 。 
表 1-5 电 商 业务 模式 
名 称 描 述 


B2B 企业 对 企业 的 电子 商务 模式 ,如 阿里 巴巴 


B2C 企业 对 个 人 的 电子 商务 模式 ,如 天 猫 .京东 


C2C 个 人 对 个 人 的 电子 商务 模式 ,如 淘宝 、 闲 鱼 


O20 是 指 将 线 下 的 商务 机 会 与 互联 网 结合 ,让 互联 网 成 为 线 下 交易 的 平台 的 商务 模式 ,如 美 团 


3. 文档 体系 
在 产品 设计 流程 中 ,主要 产 出 3 种 文档 ,如 表 1-6 所 示 。 
表 1-6 产品 设计 流程 中 的 文档 


名 称 描 述 

BRD 商业 需求 文档 ,主要 包括 产品 的 核心 竞争 力 、 收 益 等 
MRD 市 场 需求 文档 ,主要 包括 业务 模式 、 产 品 模式 目标 客户 等 
PRD 产品 需求 文档 ,主要 包括 产品 雏形 .实现 方向 等 
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4. 产品 版 本 
产品 的 版 本 主要 包括 开发 版 本 和 商业 版 本 两 大 类 ,具体 如 表 1-7 和 表 1-8 所 示 。 


表 1-7 产品 开发 版 本 


名 称 描 述 
Alpha 版 预览 版 ,或 者 叫 内 部 测试 版 ,一 般 不 向 外 部 发 布 ,只 供 测试 人 员 使 用 
Beta 版 公开 测试 版 ,这 个 版 本 比 Alpha 版 发 布 得 晚 一 些 ,主要 是 供 忠 实用 户 测试 使 用 
RC 版 候选 版 ,该 版 本 又 较 Beta 版 更 进 了 一 步 ,该 版 本 功能 不 再 增加 ,和 最 终 发 布 版 功能 一 样 
Stable 版 稳定 版 ,开源 软件 都 有 Stable 版 ,也 就 是 开源 软件 的 最 终 发 行 版 

表 1-8 产品 商业 版 本 

名 称 描 述 
RTM 版 工厂 版 ,该 版 本 程序 已 经 固定 ,就 差 工厂 包装 .光盘 印 制图 案 等 工作 了 
OEM 版 厂商 定制 版 ,是 给 计算 机 厂商 随 着 计算 机 出 售 的 
EAVL 版 评估 版 ,一 般 有 30 一 60 天 使 用 期 限 
RTL 版 零售 版 ,该 版 本 就 是 正在 发 售 的 版 本 
1.5 产品 工具 


“ 工 欲 善 其 事 , 必 先 利 其 器 。 "熟练 掌握 一 些 优秀 的 产品 设计 工具 ,可 以 让 产品 经 理 在 工 
作 中 事半功倍 。 产 品 经 理 使 用 的 产品 设计 工具 有 很 多 ,其 中 最 典型 的 是 Axure RP、XMind、 
Visio。 本 节 对 这 3 种 工具 做 简单 介绍 。 


as 


Axure RP 


Axure RP 简称 Axure, 发 音 为 ack-sure。Axure 代表 美国 Axure 公司 ,RP 则 是 Rapid 
Prototyping( 快 速 原型 ) 的 缩写 。 作 为 美国 Axure 公司 旗舰 产品 ,Axure 是 一 个 专业 的 快速 
原型 设计 工具 ,让 负责 定义 需求 的 产品 经 理 能 够 快速 创建 产品 的 草图 、 流 程 图 、 原 型 图 和 规 
格 说 明文 档 。 图 1-17 为 Axure 的 图 标 。 

作为 在 全 球 广 泛 使 用 的 原型 设计 工具 ,Axure 是 所 有 产 


品 经 理 、 


效 ,已 被 


交互 设计 师 必 须 掌握 的 软件 。Axure 操作 简单 .高 
大 多 数 公 司 所 采用 。 


Axure 的 使 用 者 主要 包括 商业 分 析 师 、 可 用 性 专家 、 产 QXxUre 


品 经 理 、 


计 师 等 。 


图 1-18 


IT 咨询 师 、 用 户 体验 设计 师 、 交 互 设计 师 、 界 面 设 
另外 ,架构 师 、 程 序 开发 工程 师 也 使 用 Axure。 EP 


为 Axure 的 工作 界面 。 本 书 统一 使 用 Axure 绘制 


项 目 流程 图 和 原型 图 (关于 Axure 的 操作 方法 将 在 第 2 章 
详细 讲解 ) 。 图 1-17 Axure 图 标 


14 


互联 网 产品 设计 思维 与 实践 
EECEIIEEOETETESTIECIECETIETTI 
二 a 
De Be + 时 加 人 wasiowz ~ 
Er Re Ea 5 Rzv 十 三 下 王 入 
lipse -oa "Mm il -Noliiula l= 二 盏 - 名 - 2- 三 
mm 到 国 Q | Home 栓 二 器 Pie Chart D 
Ey 加 - 四 
ss 到 (Pie Chart 吉 现 
口 ae = 
3 i = 
口 mee3 ~ E33 国 -| | 
库 = Q ” ms 3 
Default 司 | 
o 9 EE 三 -| [2Z7 [EE 
ins / Er TQ 
口 D Hom 
(Pechar) 
a °« o 9 


图 1-18 Axure 的 工作 界面 


1.5.2 XMind 


XMind 是 一 款 非常 实用 的 商业 思维 导 图 软件 ,具有 思维 管理 、 商 务 演示 ,与 办 公 软 件 协 
同 工 作 等 功能 。 在 产品 设计 中 ,XMind 主要 用 于 绘制 产品 结构 图 。 产 品 经 理 在 开展 头脑 风 
暴 时 ,可 以 利用 XMind 来 快速 厘清 思路 ,快速 记录 并 结构 化 思维 灵感 。 图 1-19 为 XMind 
的 图 标 。 


XMind7.5 


The Most Popular Mind Mapping Tool 


图 1-19 XMind 图 标 


除了 绘制 思维 导 图 外 ,XMind 还 可 以 绘制 鱼 骨 图 .二 维 图 、 树 形 图 .逻辑 图 和 组 织 结构 图 ， 
并 且 可 以 很 方便 地 在 这 些 展示 形式 之 间 进 行 转换 。 在 兼容 性 方面 ,XMind 可 以 导入 
MindManager、FreeMind 的 文件 ,也 可 以 将 自身 的 文件 导出 为 Word、PPT、PDF、 图 片 和 TXT 等 
格式 的 文件 ,以 便 将 用 XMind 绘制 的 图 与 他 人 轻松 共享 。 图 1-20 为 XMind 的 工作 界面 。 


leds3, Visio 


Visio 是 一 款 矢量 流程 图 制作 工具 ,也 是 目前 产品 经 理 最 常用 的 一 款 流 程 图 工具 ,其 图 
标 如 图 1-21 所 示 。 通 过 Visio 可 以 方便 ,快速 地 把 业务 流程 .系统 实现 流程 画 出 来 。 


Visio 包含 很 多 组 件 库 和 丰富 的 模板 ,可 以 很 方便 地 完成 各 类 流程 图 、 结 构图 的 制作 。 
图 1-22 为 Visio 的 工作 界面 。 
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吕 司 
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图 1-20 XMind 的 工作 界面 


图 1-21 Visio 图 标 
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图 1-22 Visio 的 工作 界面 
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1.6 互联 网 产品 的 设计 流程 


互联 网 产品 大 多 源 于 对 需求 的 敏锐 把 握 和 精妙 的 创意 。 面 对 无 形 的 互联 网 产品 ,产品 
经 理 只 有 熟悉 产品 设计 流程 ,才能 在 各 个 阶段 把 控 产品 ,保证 产品 的 顺利 实现 。 本 节 从 产品 
构想 .需求 分 析 和 论证 ,产品 设计 、 开 发 和 测试 等 方面 介绍 互联 网 产品 的 设计 流程 。 


1.6.1 产品 构想 


互联 网 产品 的 成 型 并 不 是 一 跳 而 就 的 ,而 是 由 最 初 的 想法 酝 醉 和 演变 而 来 的 。 这 个 想 
法 就 像 一 颗 种 子 , 从 萌芽 到 成 长 ,最 终 成 为 一 款 产 品 。 所 以 产品 设计 的 第 一 步 就 是 产品 构 
想 。 产 品 构想 的 来 源 主 要 有 4 个 方面 : 观察 生活 ,用户 反 馈 、 竞 品 启示 、 领 导 下 达 任 务 , 具 体 
介绍 如 下 。 


1. 观察 生活 


产品 创意 一 般 来 源 于 对 生活 中 事物 的 观察 和 思考 。 产 品 经 理 也 是 生活 在 一 定 领域 和 阶 
层 中 的 人 ,在 生活 中 只 要 认真 观察 和 思考 ,总 能 发 现 很 多 问题 。 这 些 问 题 都 可 以 成 为 产品 经 
理 研发 产品 、 解 决 问 题 的 契机 。 例 如 ,现在 的 年 轻 人 大 多 靠 外 卖 解决 一 日 三 餐 。 外 卖 卫 生 状 
况 堪 忧 , 可 很 多 年 轻 人 却 不 会 做 饭 。 可 能 有 的 产品 经 理 就 会 萌生 这 样 的 想法 : 能 不 能 运用 
人 工 智能 技术 设计 一 款 会 做 饭 的 机 器 人 ,如 图 1-23 所 示 。 


图 1-23 机 器 人 炒菜 


2. 用 户 反馈 


一 些 大 中 型 公司 每 天 都 会 收 到 用 户 各 种 各 样 的 反馈 信息 ,虽然 这 些 反 馈 信息 并 不 能 成 
为 真正 的 产品 需求 ,但 有 些 反馈 信息 经 过 产品 经 理 的 提炼 和 筛选 后 ,有 时 也 可 以 得 到 产品 构 
想 的 启示 。 


竞 品 启示 是 产品 构想 的 另 一 个 重要 来 源 。 这 里 的 竞 品 指 的 是 市 面 上 具备 发 展 前 景 的 同 
品 。 针 对 一 款 产 品 ,产品 经 理 可 以 深入 思考 产品 是 否 解决 了 问题 ,有 没有 更 好 的 解决 方 
,产品 有 没有 需要 改进 的 地 方 。 通 过 这 些 设 问 ,产品 经 理 得 到 自己 的 产品 构想 。 通 过 竞 品 
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启示 ,产品 经 理 可 以 将 国外 特色 模式 移植 到 国内 ,或 者 进行 微 创新 差异 化 竞争 。 
4. 领导 下 达 任 务 


大 公司 很 多 产品 的 构想 来 源 于 老板 或 投资 人 的 前 脆性 判断 ,以 满足 公司 的 战略 布局 需 
要 。 通 常 高 层 会 下 达 任 务 进行 内 部 分 析 研发 。 

需要 注意 的 是 ,产品 在 构想 阶段 往往 是 粗糙 的 、 似 是 而 非 的 。 因 此 产品 经 理 需 要 对 想法 
进行 构建 和 验证 ,形成 比较 清晰 的 产品 概念 。 常 用 的 验证 方法 有 自治 验证 法 和 三 角 互 证 法 ， 
具体 介绍 如 下 。 

(1) 自治 验证 法 就 是 产品 经 理 自己 进行 逻辑 推演 ,证 明 其 构想 至 少 不 是 异想天开 或 者 
错误 的 。 

(2) 三 角 互 证 法 是 指 将 一 个 问题 从 3 个 不 同 来 源 、 不 同方 式 得 来 的 结果 加 以 分 析 比 较 ， 
看 是 否 具有 一 致 性 。 在 产品 构想 阶段 ,产品 经 理 可 以 将 自己 的 想法 分 享 给 同事 、 同 行 或 者 可 
能 受益 的 用 户 代表 ,征集 他 们 的 建议 ,通过 这 样 的 小 范围 沟通 ,让 最 初 的 产品 构想 不 断 变 得 
清晰 。 

产品 构想 阶段 的 产 出 物 为 产品 的 模糊 形态 ,如 产品 的 大 致 定位 、 基 本 功能 设想 等 。 


1.6.2 产品 需求 分 析 和 论证 


通过 产品 构想 和 验证 ,一 个 基本 的 产品 概念 就 初 具 雏 形 了 。 但 此 时 的 产品 概念 还 只 是 
产品 经 理 个 人 的 构想 ,这 个 构想 到 底 能 否 发 展 为 成 型 的 产品 ,还 需要 对 产品 的 需求 进行 范围 
更 广 的 分 析 和 论证 。 需 求 分 析 和 论证 包括 用 户 研究 和 市 场 研究 两 方面 ,具体 介绍 如 下 。 


1. 用 户 研究 


用 户 研 究 是 围绕 以 用 户 为 中 心 的 设计 方法 论 所 进行 的 活动 ,使 用 户 的 实际 需求 成 为 产 
品 设计 的 导向 ,使 产品 更 贴近 用 户 。 用 户 研 究 的 目的 是 定位 产品 的 目标 人 群 和 用 户 。 常 见 
的 用 户 研究 方式 有 用 户 访 谈 、 调 查 问 卷 数据 分 析 等 。 

2. 市 场 研究 


通过 市 场 研究 来 了 解 市 场 情况 ,比较 行业 产品 ,丰富 对 自身 产品 的 理解 。 产 品 的 市 场 研 
究 主要 包括 两 方面 : 行业 分 析 和 竞 品 分 析 , 如 图 1-24 所 示 。 


行业 分 析 的 目的 是 明确 产品 的 市 场 价值 有 多 大 ,天 花 板 在 2 
哪里 .产品 有 没有 前 途 , 是 为 了 解决 值 不 值得 做 的 问题 。 竞 品 市场 研究 
分 析 的 目的 是 明确 产品 的 差异 化 亮点 和 产品 运作 策略 ,是 为 了 竞 品 分 析 
解决 怎么 做 的 问题 。 2 


产品 需求 分 析 和 论证 阶段 的 产 出 物 为 产品 的 定位 、 核 心 功 
能 发 展 规划 等 。 在 此 阶段 会 对 产品 项 目 进行 立项 (立项 是 指 建立 项 目 , 并 有 计划 地 组 织 和 
实施 ,一 般 包 括 立项 筹备 .立项 评审 和 项 目 启 动 3 部 分 ), 产 出 的 文档 包括 商业 需求 文档 
(BRD) ,市 场 需求 文档 (MRD) 等 。 

注意 : 关于 项 目的 立项 时 间 , 每 个 公司 都 有 自己 的 规范 , 既 可 以 在 产品 需求 分 析 和 论证 
阶段 立项 ,也 可 以 在 产品 设计 阶段 立项 。 


18 


互联 网 产品 设计 思维 与 实践 


1.6.3 产品 设计 

如 果 通 过 产品 需求 分 析 和 论 论证 后 确定 产品 可 以 实现 ,就 可 以 着 手 进行 产品 设计 了 。 
产品 设计 主要 包括 产品 结构 设计 、 产 品 流程 设计 、 产 品 原型 设计 、 用 户 界 面 设计 、 交 互 设计 ， 
具体 介绍 如 下 。 


1. 产品 结构 设计 


产品 结构 设计 就 是 绘制 产品 功能 或 页 面 的 基本 架构 。 在 产品 结构 设计 阶段 的 产 出 物 为 
品 结构 图 ( 详 见 1. 3. 1 节 )。 产 品 结构 图 就 相当 于 产品 的 骨架 ,是 流程 图 和 原型 图 的 绘制 
依据 。 


2. 产品 流程 设计 
产品 流程 设计 指 的 是 绘制 能 够 明确 产品 的 操作 环节 和 转换 关系 的 图 示 , 是 产品 设计 的 


核心 内 容 。 在 产品 流程 设计 阶段 的 产 出 物 为 产品 流程 图 ( 详 见 1. 3. 1 节 )。 产 品 流程 图 的 存 
在 让 项 目 参 与 者 明确 知道 业务 是 如 何 运 作 的 ,便于 快速 开展 工作 。 


3. 产品 原型 设计 


产品 原型 设计 指 的 是 综合 考虑 产品 目标 、 功 能 需求 等 因素 ,运用 线条 或 图 形 对 产品 的 各 
版 块 .界面 和 元 素 进行 合理 排序 的 过 程 。 在 产品 原型 设计 阶段 的 产 出 物 为 低 保 真 产品 原型 
图 ( 详 见 1. 3. 1 节 )。 产 品 原型 设计 在 整个 产品 设计 流程 中 处 于 最 重要 的 位 置 ,有 着 承 上 启 
下 的 作用 。 在 产品 原型 设计 之 前 ,需求 或 功能 信息 都 相对 抽象 ,产品 原型 设计 的 过 程 就 是 将 
抽象 信息 转化 为 具象 信息 的 过 程 ,随后 产 出 的 产品 需求 文档 (PRD) 是 对 产品 原型 设计 中 的 
版 块 .界面 ,元 素 及 它们 之 间 的 执行 逻辑 的 描述 和 说 明 。 


4. 用 户 界面 设计 


用 户 界面 设计 是 指 在 产品 原型 图 的 基础 上 ,运用 颜色 图形、 图 像 装饰 产品 ,将 美观 的 产 
品 界面 呈现 给 用 户 。 在 用 户 界面 设计 阶段 , 产 出 物 为 产品 界面 效果 图 。 由 于 视觉 效果 是 一 
项 专业 性 要 求 比较 高 的 工作 ,因此 在 产品 设计 团队 中 会 专门 设立 UI 设计 师 的 岗位 。 产 品 
经 理 在 这 个 阶段 的 主要 作用 是 辅助 UI 设计 师 进 行 产品 视觉 设计 ,并 从 产品 层面 给 出 建议 。 


5. 交互 设计 


交互 设计 就 是 通过 互动 提升 用 户 在 使 用 产品 过 程 中 的 感受 ,从 而 提高 用 户 的 满意 度 和 
忠诚 度 。 在 产品 设计 中 ,交互 设计 的 目标 可 以 从 可 用 性 和 用 户 体验 两 个 层面 进行 分 析 ,关注 
以 用 户 为 中 心 的 产品 需求 。 和 用 户 界面 设计 一 样 ,交互 设计 也 会 设立 专门 的 岗位 一 一 交互 
设计 师 。 在 工作 中 ,交互 设计 师 会 秉承 以 用 户 为 中 心 的 设计 理念 ,以 提升 用 户 体验 为 原则 ， 
在 产品 经 理 的 配合 下 共同 完成 交互 设计 。 

产品 设计 阶段 的 产 出 物 为 产品 的 结构 .流程 和 详细 的 功能 模块 等 。 在 此 阶段 ,产品 经 理 
会 对 产品 功能 进行 梳理 ,在 UI 设计 师 和 交互 设计 师 的 配合 下 完成 低 保 真 原型 图 和 高 保 真 
原型 图 的 制作 (有 的 公司 不 会 要 求 完成 高 保 真 原型 图 )。 当 产品 经 理 完 成 原型 图 的 设计 后 ， 
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会 产 出 产品 需求 文档 。 
1.6.4 开发 和 测试 


当 产 品 需求 文档 通过 评审 后 ,产品 可 交 由 开发 团队 进行 功能 实现 。 在 开发 和 测试 阶段 ， 
产品 经 理 的 主要 工作 是 对 开发 项 目 进度 的 把 控 \、 协 调 。 产 品 功能 实现 的 过 程 主要 分 为 两 个 
阶段 : 开发 阶段 和 测试 阶段 ,具体 介绍 如 下 。 


1. 开发 阶段 


在 开发 阶段 ,开发 团队 会 根据 产品 需求 文档 进行 需求 分 析 、 技 术 调 研 、 制 定 技术 实施 方 
案 , 再 将 前 端 制作 好 的 页 面 进行 代码 合成 。 现 在 的 主流 开发 模式 有 两 种 : 瀑布 式 开发 和 人 敏 
捷 开发 。 

1) 瀑布 式 开发 

瀑布 式 开发 是 指 采用 瀑布 模型 ,把 软件 生存 周期 的 各 项 活动 规定 为 按 固 定 顺序 连续 进 
行 的 若干 阶段 , 形 如 瀑布 流水 ,如 图 1-25 所 示 。 


件 概念 1 
软件 概 用 户 需求 
需求 分 析 
软件 需求 /原型 
架构 设计 
架构 文档 
详细 设计 
设计 模型 
编码 
代码 文件 


测试 


图 1-25 瀑布 式 开发 


虽然 瀑布 式 开发 方式 各 阶段 衔接 紧密 ,可 以 让 开发 工作 有 条 不 训 地 进行 ,但 它 也 存在 一 
些 缺 点 ,具体 如 下 : 

。 各 个 阶段 的 划分 完全 固定 ,阶段 之 间 产 生 大 量 的 文档 , 极 大 地 增加 了 工作 量 。 

。 由 于 开发 模型 是 线性 的 ,只 有 等 到 整个 过 程 的 末期 才能 见 到 开发 成 果 , 难 以 适应 用 

户 需求 的 变化 ,增加 开发 风险 。 

2) 敏捷 开发 

敏捷 开发 是 一 种 以 人 为 核心 .迭代 的 、 循 序 渐进 的 开发 方法 。 这 种 方法 把 一 个 大 项 目 分 
为 多 个 既 相互 联系 又 可 独立 运行 的 小 项 目 , 然 后 分 别 完成 .在 此 过 程 中 ,软件 一 直 处 于 可 以 
使 用 的 状态 ,如 图 1-26 所 示 。 

虽然 敏捷 开发 非常 灵活 ,能 够 快速 适应 市 场 和 用 户 需 求 的 变化 ,但 它 同 样 存在 一 些 缺 
点 ,具体 如 下 : 
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。 计划 性 和 规范 性 较 差 , 主 要 强调 适应 性 而 不 是 预见 性 。 
。 各 开发 阶段 的 衔接 没有 瀑布 模型 紧密 。 


= 心 功能 开发 


发 布 计划 心 功能 测 
人 a Bs P1 核 心 功能 测试 
个 
迭代 更 新 
分 析 结果 ， 整 合 P2 计 划 P1 核 / 
灰 度 上 线 


核心 = 


图 1-26 敏捷 开发 


2. 测试 阶段 


开发 人 员 初 步 完 成 产品 的 开发 后 ,还 不 能 将 产品 立即 上 线 , 而 是 要 先 经 过 内 部 的 测试 ， 
看 它 是 否 达 到 功能 标准 。 在 测试 阶段 主要 对 产品 的 样式 、 功 能 和 性 能 进行 测试 验证 ,看 它 是 
否 与 最 初 设想 一 致 。 通 常 产 品 测试 包括 两 个 方面 一 一 非 功 能 性 测试 和 功能 性 测试 。 

(1) 非 功能 性 测试 。 主 要 测试 产品 在 各 种 环境 下 是 否 能 正常 运行 

(2) 功能 性 测试 。 主 要 测试 产品 的 每 个 具体 功能 是 否 按 要 求 运 行 ,是 否 符合 之 前 的 产 
品 设计 需求 。 

在 产品 开发 和 测试 阶段 的 产 出 物 就 是 一 个 具备 需求 功能 ,可 以 让 用 户 使 用 的 产品 。 


1.6.5 产品 上 线 、. 运营 和 和 迭代 


当 产 品 的 开发 和 测试 工作 完成 后 ,就 可 以 正式 上 线 了 。 但 是 对 于 产品 经 理 来 说 ,产品 的 
上 线 并 不 是 产品 生命 周期 的 结束 ,而 是 刚刚 开始 。 在 产品 运行 过 程 中 ,产品 经 理 要 向 运营 人 
员 传达 产品 运营 的 思路 和 策略 ,并 深入 地 参与 运营 方案 的 制作 过 程 。 同 时 产品 经 理 也 要 不 
断 收集 用 户 反馈 的 问题 ,分 析 问题 的 原因 ,然后 对 产品 进行 优化 迭代 。 


1. 产品 上 线 


产品 上 线 就 是 将 研发 的 产品 发 布 出 去 ,提供 给 在 线 用 户 使 用 。 在 产品 设计 流程 中 ,产品 
发 布 是 产品 生命 周期 的 第 一 阶段 ,也 是 产品 生命 周期 最 重要 的 阶段 。 在 产品 上 线 前 要 做 好 
准备 工作 ,主要 包括 产品 物料 .产品 团队 和 风险 预 控 。 

(1) 产品 物料 。 在 物料 方面 ,要 保证 产品 核心 功能 、 核 心 流程 完整 可 用 ,同时 要 确保 使 
用 文档 帮助 文档 、 应 用 商店 的 图 片 描述 等 准备 就 绪 。 

(2) 产品 团队 。 产 品 上 线 是 公司 发 展 的 重要 里 程 碑 ,需要 各 个 团队 (如 运营 、 客 服 等 ) 的 
努力 和 配合 。 

(3) 风险 预 控 。 在 产品 上 线 过 程 中 ,有 些 突 发 性 问题 往往 是 很 难 预 料 的 ,如 用 户 量 暴 
增 、 出 现 大 量 投诉 等 。 因 此 必须 准备 第 二 套 方案 .以 防 不 测 。 
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2. 产品 运营 


产品 运营 是 帮助 产品 和 用 户 建立 关系 并 维系 这 种 关系 的 手段 。 在 运营 产品 时 ,首先 应 该 
评估 产品 的 现状 ,产品 处 于 什么 阶段 .产品 当前 所 处 的 竞争 环境 , 据 此 制定 运营 策略 ;然后 将 策 
略 目标 进行 拆 分 ,制订 执行 计划 ;最 后 需要 对 数据 进行 监测 ,做 好 数据 的 收集 和 分 析 工 作 。 


3. 产品 迭代 


产品 迭代 是 指 对 产品 进行 优化 .升级 改版 ,使 产品 满足 市 场 需求 ,保持 产品 的 竞争 力 。 
要 进行 产品 迭代 ,首先 需要 根据 不 同 团队 的 迭代 周期 .产品 预期 平台 规模 、 功 能 需求 等 进行 
选 代 调 研 ,然后 分 析 产 品 选 代 的 可 行 性 ,最 后 实施 产品 选 代 项 目 ,确定 迭代 功能 的 优先 级 ( 关 
于 和 迭代 的 相关 知识 将 在 第 8 章 讲 解 ) 。 


阶段 案例 : 洗刷 刷 App 产品 设计 流程 


在 介绍 了 产品 .产品 经 理 和 产品 设计 流程 之 后 , 接 下 来 通过 一 个 洗车 软件 项 目 分 析 互 联 
网 产品 的 设计 流程 。 


1. 产品 构想 


洗刷 刷 是 一 个 线 下 连锁 洗车 门店 。 最 近 几 年 , 随 着 劳动 力 成 本 逐步 提升 ,门面 租金 上 
涨 ,传统 洗车 店 生存 的 压力 变 得 越 来 越 大 。 如 何 吸引 用 户 , 增 强 用户 黏 性 或 者 增加 增值 服 
务 , 寻 求 转型 机 会 ,已 经 成 为 洗刷 刷 蝇 待 解决 的 问题 。 随 着 互联 网 行业 的 发 展 ,市 场 上 也 出 
现 了 许多 专门 为 车 主 提供 汽车 服务 的 移动 App 产品 ,“ 互 联网 十 汽车 "全然 成 为 汽车 圈 的 热 
门 话题 。 而 洗车 作为 汽车 后 市 场 的 基础 服务 ,是 进入 汽车 020 市 场 的 最 好 入 口 。 因 此 ,可 
以 设计 一 款 洗车 类 的 App 产品 ,其 优势 主要 表现 在 以 下 几 个 方面 。 

(1) 方便 吸引 用 户 。 互 联网 是 一 个 大 市 场 ,手机 用 户 群 也 越 来 越 庞 大 。 如 果 将 洗车 服 
务 软件 制作 成 一 个 App, 通 过 用 户 注 册 就 能 很 方便 地 收集 用 户 信息 , 更 好 地 进行 业务 推广 
和 宣传 。 

(2) 增加 用 户 黏 性 。 可 以 通过 会 员 机 制 和 一 些 优惠 .礼品 让 用 户 使 用 App, 为 用 户 持续 
消费 打 好 基础 。 

(3) 制造 转型 机 会 。 可 以 将 一 些 礼品 \ 优 惠 券 等 放 到 App 积分 商城 ,通过 洗车 、 会 员 等 
方式 进行 积分 ,采用 积分 兑换 商品 的 机 制 , 发 展 线 上 商城 。 在 用 户 积累 到 一 定 规模 时 ,可 以 
将 商城 转型 为 真正 的 汽车 用 品类 电 商 平台 (类 似 天 猫 、 京 东 的 网 站 )。 

到 此 ,关于 洗刷 刷 App 产品 已 经 有 了 一 个 基本 的 形态 ,具体 如 表 1-9 所 示 。 


表 1-9 洗刷 刷 App 产品 的 基本 形态 


产 物 解 释 


产品 概念 结合 线 下 洗车 门店 的 一 款 洗车 App 


短期 规划 : 有 车 的 移动 端 用 户 ,主要 是 洗车 和 保养 等 服务 。 


人 中 期 规划 : 互联 网 用 户 , 主 要 经 营 汽车 用 品 的 电 商 网 站 ,完成 企业 转型 


Rt 
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续 表 
产 物 解 释 
。 洗 车 和 查询 洗车 门店 ; 
产品 功能 。 增加 保养 、 维 修 等 与 汽车 相关 的 服务 类 目 ; 
。 积分 兑换 ; 
。 会 员 机 制 (充值 优惠 ,会员 代 金 券 等 ) 


2. 产品 需求 分 析 和 论证 


有 了 关于 洗刷 刷 App 产品 的 基本 概念 和 定位 , 接 下 来 就 可 以 进行 产品 需求 分 析 和 论证 
了 。 在 这 一 阶段 要 具体 分 析 产品 的 目标 市 场 , 用 户 以 及 现 有 的 竞争 产品 ,总 结 产品 的 需求 概 
况 , 并 进一步 梳理 需求 (关于 产品 需求 的 具体 分 析 可 参见 第 3 章 ) 。 


3. 产品 设计 


在 此 阶段 主要 是 绘制 洗刷 刷 App 产品 的 结构 图 .流程 图 .原型 图 。 


4. 产品 开发 和 测试 


开发 和 测试 主要 是 洗刷 刷 App 产品 的 实现 过 程 ,包括 开发 阶段 和 测试 阶段 。 开 发 阶段 
主要 实现 商品 的 功能 模块 。 测 试 阶段 主要 是 为 了 保证 洗刷 刷 App 的 正常 运行 。 

该 项 目 采 用 敏捷 开发 的 方式 ,将 整个 开发 周期 分 为 两 个 阶段 (为 了 便于 本 书 项 目 演 示 ， 
不 对 具体 需求 进行 细 化 ,只 分 两 个 大 的 模块 ) ,具体 如 表 1-10 所 示 。 


表 1-10 开发 阶段 
阶段 产 物 
第 一 阶段 洗车 App 的 功能 模块 
第 二 阶段 以 洗车 App 积分 商城 为 基础 制作 一 个 PC 端 电 商 网 站 


5. 产品 上 线 、 运 营 和 迭代 


这 个 阶段 主要 是 洗刷 刷 App 产品 的 发 布 .运营 和 推广 。 在 进行 迭代 时 ,需要 收集 用 户 
的 反馈 信息 ,完善 产品 功能 ,并 实现 第 二 阶段 的 电 商 网 站 产品 。 


2 
Axure 工 具 基 本 操作 


学 习 目 标 

。 了 解 Axure 的 工作 界面 。 

。 认识 Axure 的 常用 组 件 。 

。 掌握 Axure 的 基本 操作 。 

作为 专业 的 快速 原型 设计 工具 ,Axure 已 成 为 所 有 产品 经 理 必 须 学 会 的 一 款 软件 。 掌 


握 Axure 的 基本 操作 是 产品 设计 入 门 的 第 一 步 。 本 章 将 带领 读者 认识 Axure 的 工作 界面 
和 常用 组 件 ,了 解 Axure 的 基本 操作 。 


2.1 软件 基础 


在 学 习 一 款 软件 之 前 ,首先 要 了 解 这 个 软件 。 本 节 将 针对 Axure 的 文件 格式 进行 讲 
解 。 本 书 统一 采用 Axure RP 8 进行 讲解 ,图 2-1 所 示 即 为 Axure RP 8( 以 下 称 为 Axure) 软 
件 的 欢迎 界面 。 


局 欢 字 使 用 Axure 


图 ste 
8.0.0.3312 


WELCOME TO AXURE RP EE 


更 多 资源 : 

Axure 论坛 > 
Amure 地 宕 > 
Amure 文 持 > 


局 9 不 显示 该 画面 


图 2-1 Axure RP 8 欢迎 界面 
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在 图 2-1 所 示 的 欢迎 界面 中 ,打开 文件 ?按钮 下 方 的 区 域 是 最 近 打开 的 文件 列表 ,由 此 
也 可 以 看 出 ,Axure 主要 包含 3 种 不 同 的 文件 格式 : 

(1) .rp 文件 : 是 使 用 Axure 进行 原型 设计 时 所 创建 的 文件 格式 ,也 是 保存 项 目 时 的 默 
认 格 式 , 如 图 2-2 所 示 。 

(2) . rplib 文件 : 是 元 件 库 的 文件 格式 ,用 户 创建 的 或 者 在 网 上 下 载 的 Axure 元 件 库 均 
为 该 格式 ,如 图 2-3 所 示 。 

(3) . rpprj 格式 : 是 团队 协作 的 项 目 文件 格式 ,通常 用 于 团队 中 多 人 协作 处 理 同一 个 较 
为 复杂 的 项 目 。 团 队 项 目 允许 随时 查看 并 恢复 到 任意 一 个 历史 版 本 ,如 图 2-4 所 示 。 


面 RE rpprj 


图 2-2 .rp 格式 文件 图 2-3 .rplib 格式 文件 2-4 .rpprj 格式 文件 


2.2 Axure 工作 界面 介绍 


启动 Axure 后 (关闭 欢迎 页 面 ), 即 可 看 到 其 工作 界面 。 在 工作 界面 中 包含 菜单 栏 、 工 
具 栏 ( 主 工具 栏 和 样式 工具 栏 )、 页 面 面 板 、 库 面板 、 母 版 面板 、 页 面 编辑 区 ,检查 器 、 大 纲 面 板 
等 ,如 图 2-5 所 示 。 


三 检查 器 


广 大 纲 面板 


I 
页 面 编辑 区 
图 2-5 Axure 工作 界面 


1. 菜单 栏 
菜单 栏 作 为 软件 必 不 可 少 的 组 成 部 分 ,主要 用 于 为 大 多 数 命令 提供 功能 人口。Axure 软 
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件 的 菜单 栏 包括 文件 .编辑 ,视图 项目, 布局 发布. 团 队 、 账 号 帮助 9 个 菜单 ,如 图 2-6 所 示 。 


ED 编辑 CE) 视 加 VW 项 目 F) 布局 发 布 F) EC) 账号 W 部 助 9 | 


图 2-6 菜单 栏 


对 图 2-6 所 示 的 菜单 栏 选项 具体 解释 如 下 : 

(1) “文件 ”菜单 包含 打开 、 新 建 , 保 存 、 导 入 /导出 等 命令 。 

(2)“ 编 辑 " 菜 单 包 含 撤销 /恢复 ,前 切 、 复 制 .粘贴 等 命令 。 

(3)“ 视 图 "菜单 包含 工具 栏 设置 .面板 设置 等 命令 。 

(4)“ 项 目 ” 菜 单 包 含 元 件 / 页 面 设置 等 设置 命令 。 

(5)“ 布 局 ”菜单 包含 组 合 / 取 消 组 合 、 元 件 顺序 ,辅助 线 等 命令 。 
(6)“ 发 布 ”菜单 包含 预览 .发布 .预览 设置 等 相关 命令 。 

(7)“ 团 队 ” 菜 单 包 含 团队 项 目 相关 命令 。 

(8)“ 账 号 "菜单 包含 账号 创建 、 登 录 等 命令 。 

(9)“ 帮 助 ”菜单 包含 各 种 帮助 信息 。 


2. 主 工具 栏 和 样式 工具 栏 


主 工具 栏 和 样式 工具 栏 统 称 为 工具 栏 , 是 Axure 的 重要 组 成 部 分 。 工 具 栏 主要 用 于 所 
有 元 件 的 通用 属性 设置 , 当 鼠 标 光标 停留 在 某 个 工具 上 时 会 显示 工具 名 称 。 下 面 分 别 对 主 
工具 栏 和 样式 工具 栏 进行 讲解 。 

主 工具 栏 主要 用 于 执行 文档 的 基本 操作 ,例如 撤销 、 剪 切 /粘贴 .对齐 以 及 发 布 预览 等 ， 
如 图 2-7 所 示 。 


图 2-7 主 工具 栏 


样式 工具 栏 主要 用 于 执行 单个 元 件 的 样式 更 改 操作 ,如 更 改 文字 的 字体 .颜色 .大 小 、 样 
式 , 设 置 元 件 的 背景 和 线条 颜色 、 元 件 大 小 等 ,如 图 2-8 所 示 。 


3. 页 面 面 板 


页 面 面 板 也 称 为 站 点 地 图 ,主要 用 于 展示 文档 中 包含 的 页 面 ,这 些 页 面 以 Home 为 根 
节点 , 呈 树 状 展示 ,可 以 快速 打开 项 目 原型 不 同 的 页 面 。 在 Axure 中 ,页 面 面 板 主要 包含 添 
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re le jo0 Fame | 


证 Te i DID FE 
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图 2-8 样式 工具 栏 
加 、 删 除 . 重 命名 和 组 织 页 面 层次 的 功能 ,如 图 2-9 所 示 。 如 果 需 要 对 某 个 页 面 进行 编辑 , 则 
只 需要 在 页 面 面 板 中 找到 这 个 页 面 并 双击 , 即 可 打开 这 个 页 面 。 
新 增 页 面 


mm 回国 村 yi 文人 


页 面 名 称 


子 级 页 面 


图 2-9 页 面 面 板 


4. 库 面板 


库 面板 是 用 于 存放 元 件 的 地 方 。 元 件 也 被 译 为 控件 组件、 部 件 ,本 书 统一 将 其 称 为 元 
件 。 在 Axure 库 面 板 中 不 仅 包含 线 框 图 元 件 库 、 流 程 图 元 件 库 ,还 提供 了 载 入 元 件 库 和 创 
建 元 件 库 等 功能 ,如 图 2-10 所 示 。 


5. 母 版 面板 


母 版 是 一 种 可 以 复 用 的 特殊 模块 。 在 绘制 线 框图 时 ,往往 一 个 模块 被 反复 使 用 ,此 时 就 
需要 用 到 母 版 ,例如 页 面 的 导航 栏 标签 栏 等 都 可 以 通过 母 版 来 调用 。 使 用 母 版 的 优势 是 : 
当 修改 母 版 中 的 元 件 时 ,页 面 中 所 有 使 用 该 母 版 的 元 件 都 会 随 之 更 改 , 在 设计 时 可 以 提高 效 
率 并 方便 管理 。 在 母 版 面板 中 可 进行 模块 的 添加 、 删 除 、 重 命名 和 组 织 模块 分 类 层次 。 选 中 
母 版 并 右 击 , 即 可 对 其 进行 相关 操作 ,如 图 2-11 所 示 。 


Dals 
新 生生 1 | 
3 内 
本 条 动 四 
和 名 是 疼 0) 
重 命名 (R) 
~ Defaut > 公用 夏 制 C) 
加 | 拖 放行 为 @) » 
方 框 1 方 框 2 
0 ad 
锋 男 EB 


图 2-10 库 面 板 图 2-11 母 版 的 快捷 菜单 
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6. 页 面 编辑 区 


页 面 编辑 区 也 叫 工作 区 ,是 进行 流程 图 、 原 型 图 制作 的 主要 区 域 ,如 图 2-12 所 示 。 页 面 
编辑 区 默认 显示 标尺 ,标尺 的 刻度 为 像素 。 


2-12 页 面 编辑 区 


7. 检查 器 


检查 器 用 于 设置 元 件 交互 样式 、 元 件 自身 样式 以 及 给 元 件 添加 备注 的 功能 。 检 查 器 包 
含 3 个 面板 ,分 别 是 “属性 ”面板 “备注 ”面板 “样式 ”面板 ,下 面 对 这 3 个 面板 进行 介绍 。 

(1)“ 属 性 ?面板 : 主要 用 于 设置 元 件 的 交互 效果 ,如 图 2-13 所 示 。 

(2) “备注 ?面板 : 主要 用 于 对 页 面 或 页 面 中 指定 的 元 件 进行 说 明 注释 ,如 图 2-14 所 示 。 


图 2-13 “属性 ”面板 图 2-14 “备注 ”面板 
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(3) “和 样式” 面板 : 主要 用 于 设置 元 件 自身 的 样式 ,如 边框 颜色 .填充 颜色 .字体 样式 、 线 
段 类 型 等 ,如 图 2-15 所 示 。 
8. 大 纲 面板 


大 纲 面板 用 于 显示 和 管理 某 个 页 面 中 的 所 有 元 件 , 如 图 2-16 所 示 。 双 击 某 个 元 件 即 可 
在 检查 器 面板 和 页 面 编 辑 区 内 对 其 进行 修改 。 


边 距 左 |2 | 上 |2 | 右 |2 | 下 |2 


图 2-15 “样式 ”面板 图 2-16 “大 纲 ? 面 板 


2.3 常用 元 件 


元 件 是 低 保 真 原型 图 或 流程 图 的 组 成 部 分 ,Axure 元 件 库 内 包含 线 框图 元 件 .流程 图 元 
件 以 及 图 标 元 件 ,这 些 元 件 分 别 用 来 绘制 线 框图 、 流 程 图 以 及 图 标 。 本 节 将 针对 Axure 的 
常用 元 件 进行 讲解 。 
2.3.1 Default 元 件 库 

在 用 Axure 绘制 原型 图 之 前 ,首先 要 先 了 解 这 些 常 用 的 基本 元 件 。Default( 默 认 ) 元 件 
库 包 含 公 用 元 件 库 、 窗 体 元 件 库 、 菜 单 和 表格 元 件 库 、 标 记 元件 库 4 类 。 下 面 针 对 基本 的 公 
用 元 件 库 和 窗 体 元 件 库 进行 讲解 。 
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1. 公用 元 件 库 


公用 元 件 库 也 称 为 常用 元 件 库 。 在 公用 元 件 库 中 ,常用 的 元 件 有 图 像 、 标 题 \, 标 签 、 文 
本 、 方 框 \ 横 线 、 垂 直线 、 占 位 符 、 按 钮 动态 面板 、 图 像 热 区 等 ,下 面 分 别 
对 这 些 常 用 元 件 进 行 介 绍 。 
(1) 图 像 元 件 : 代表 图 片 ,通过 这 个 元 件 ,可 以 添加 本 地 图 片 到 页 面 
中 ,如 图 2-17 所 示 。 图 2-17 图 像 元 件 
(2) 标题 .标签 和 文本 元 件 : 分 别 用 于 输入 标题 文本 .普通 文本 以 及 
段落 文本 ,如 图 2-18 和 图 2-19 所 示 。 


图 像 


H1 H2 H3 A- AE 
标题 1 标题 2 标题 3 村 签 文本 
图 2-18 标题 元 件 图 2-19 标签 和 文本 元 件 


(3) 方 框 元 件 : 是 Axure 最 常用 的 元 件 之 一 , 它 不 但 可 以 用 来 作为 背景 ,还 可 以 用 于 页 
面 布局 ,Axure 提供 了 3 种 不 同 颜色 的 方 框 ,如 图 2-20 所 示 。 

(4) 横 线 和 垂直 线 元 件 : 当 需 要 在 视觉 上 分 隔 一 些 区 域 时 ,可 以 使 用 这 两 个 元 件 , 如 
图 2-21 所 示 。 


本 


方 框 1 方 框 2 方 框 3 机 并 垂直 线 
图 2-20 方 框 元 件 图 2-21 横 线 和 垂直 线 元 件 


(5) 占 位 符 元 件 : 往往 有 一 些 区 域 需要 填充 一 些 内容 , 而 这 些 内 容 可 能 会 依据 不 同 的 
情况 而 变化 ,例如 焦点 图 ,因此 在 做 原型 时 ,一 般 将 这 些 地 方 用 占 位 符 代替 ,代表 这 里 以 后 会 
填充 其 他 内 容 , 如 图 2-22 所 示 。 

(6) 按钮 元 件 : 是 一 个 带 样式 的 按钮 ,可 以 通过 调整 其 样式 来 区 别 鼠 标 移 人 时 、 鼠 标 悬 
停 时 、 鼠 标点 击 时 的 交互 样式 ,Axure 提供 了 3 种 不 同样 式 的 按钮 ,如 图 2-23 所 示 。 


我 是 一 个 占 位 符 
Ea Burron 
近江 主要 和 刘 。。 裕 Ss 记 
图 2-22 占 位 符 元 件 图 2-23 ”按钮 元 件 


(7) 动态 面板 元 件 : 是 Axure 中 功能 最 强大 的 元 件 , 通 过 这 个 元 件 可 以 设置 很 多 不 同 
的 动态 效果 ,如 图 2-24 所 示 ( 关 于 动态 面板 的 使 用 ,将 会 在 第 6 章 详 细 讲 解 ,这 里 简单 了 解 
即 可 )。 
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(8) 图 像 热 区 元 件 : 是 一 个 透明 层 ,这 个 层 可 以 放 在 任何 区 域 上 ,并 在 该 层 上 添加 交 
互 。 该 元 件 通 常用 于 给 某 张 图 片 添加 交互 的 热 区 ,如 图 2-25 所 示 。 


3 e 
动态 画板 图 你 热 区 
2-24 动态 面板 元 件 图 2-25 图 像 热 区 元 件 


2. 窗 体 元 件 库 


Default 窗 体 元 件 库 也 称 为 表单 元 件 库 , 在 Default 窗 体 元 件 库 中 ,常用 的 元 件 有 单行 / 
多 行文 本 框 元 件 、 单 选 按钮 元 件 . 复 选 框 元 件 等 ,下 面 分 别 对 其 进 
行 介绍 。 

(1) 单行 /多 行文 本 框 元 件 : 单行 文本 框 元 件 是 在 页 面 中 用 来 
接收 用 户 输入 的 元 件 , 只 支持 单行 文本 输入 ;多 行文 本 框 元 件 与 单 。” 图 2-26 单行 /多 行文 
行文 本 框 元 件 类 似 , 区 别 在 于 多 行文 本 框 元 件 支持 多 行文 本 输入 。 本 要 元 件 
单行 /多 行文 本 框 元 件 如 图 2-26 所 示 。 

(2) 单 选 按钮 元 件 : 当 用 户 在 多 个 选项 中 只 能 选择 一 个 选项 时 ,就 会 用 到 单 选 按钮 元 
件 , 如 图 2-27 所 示 。 

(3) 复 选 框 元 件 : 用 于 让 用 户 在 多 个 选项 中 选择 一 个 或 多 个 选项 ,如 图 2-28 所 示 。 


咀 


abc] 


文本 框 (单行 ) ”文本 框 (多 行 ) 


单 法 摊 语 复 迁 杠 
图 2-27 单 选 按钮 元 件 图 2-28 复 选 框 元 件 


2.3.2 ”Flow 元 件 库 


Flow( 流 程 图 ) 元 件 库 是 Axure 提供 的 用 于 绘制 流程 图 的 一 个 模块 ,包含 流程 图 中 所 用 
到 的 矩形 、 圆 角 和 矩形. 菱形 等 基本 元 件 ,如 图 2-29 所 示 。 关 于 流程 图 元 件 的 意义 及 使 用 ,将 
在 第 4 章 进行 讲解 ,这 里 不 再 袭 述 。 


Y Fow 


口 口 品 OO OO 站 位 
和 矩形 要 放 算 形 医 角 矩形 。 委 放 匡 角 算 形 。 人 角 息 形 美 形 文件 要 放 文 件 
[] 人 人 上 OO OO 口 外 
括号 半 国 三 角形 梯形 椭 因 六 边 形 平行 四 边 形 角色 
日 轴 gu 
数 锯 库 快照 ES 


图 2-29 Flow 元 件 库 
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2.3.3 Icons 元 件 库 


Icons( 图 标 ) 元 件 库 内 的 图 标 元 件 用 于 快速 绘制 图 标 , 如 图 2-30 所 示 。 可 以 通过 该 元 
件 库 快 速 做 出 UI, 使 用 时 ,将 元 件 拖 忠 至 页 面 编辑 区 即 可 。 


Ld 9 
Icons S 
v os 站 
回 
5S00px Adjiust ADN 左右 居中 Algn Justify EN 二 对 齐 Amazon Ambulance 国定 点 
Androd Angelist AngeDouble AngeDouble AngleDoubl AngeDouble AngeDown AngeLef AngleRight 。 Angleup 
Down Left Raht up 
Apple Archive AreaChart Arrow Circle Arrow Circle Arrow Circle O Arrow Circle 0 Arrow Circle O Arrow Circle O Arrow Circle 
Down Len Down Le right up oht 
© vy % 一 1 炒 
Arrow Circle Arrow Down 巨 箭头 右 荫 头 Arrow Up Arrows Arrows AR ArmowsH ArowsV Asterisk 
Up 


图 2-30 Icons 元 件 库 


2.4 Axure 的 基本 用 法 


作为 绘制 原型 图 所 必 备 的 基本 软件 , Axure 的 使 用 越 来 越 受 到 大 家 的 重视 ,在 学 习 
Axure 的 各 种 功能 之 前 ,首先 要 了 解 Axure 的 基本 用 法 。 本 节 将 针对 Axure 的 基本 操作 、 
常用 元 件 的 操作 、 母 版 的 使 用 等 进行 详细 讲解 。 

2.4.1 Axure 的 基本 操作 

在 学 习 Axure 的 各 种 功能 之 前 ,首先 要 对 Axure 的 基本 操作 (如 新 建 . 打 开 、 保 存 、 预 览 
等 ) 有 所 了 解 。 下 面 针 对 Axure 的 这 些 基本 操作 进行 讲解 。 

1. 新 建文 档 


启动 Axure, 即 可 看 到 Axure 的 欢迎 界面 , 单 击 “ 新 建文 件 ” 按 钮 即 可 新 建文 件 ,如 图 2-31 
所 示 。 若 在 已 经 打开 的 文档 中 新 建文 件 , 则 可 执行 文件” 新建 "命令 (或 按 Ctrl 十 N 组 合 
键 ) 新 建文 件 。 


2. 打开 文件 


在 Axure 中 ,执行 “文件 ”一 “打开 ”命令 (或 按 Ctrl 十 O 组 合 键 ), 即 可 弹出 “打开 ”对 话 
框 ,如 图 2-32 所 示 。 选 择 要 打开 的 文件 , 单 击 “ 打 开 ” 按 钮 , 即 可 打开 文件 。 


3. 保存 文件 
保存 文件 是 一 个 十 分 重要 的 操作 , 当 用 户 第 一 次 保存 文件 时 ,在 Axure 中 执行 “文件 ”一 
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WELCOME TO AXURE RP 


一 一 ED 
下 0 9 :， EE cl! 
or 妇 
至 至 
mm Amal| 
日 
a 
图 2-31 Axure 欢迎 界面 
区 a 旧 360softlzcme 2018/4/24 14:46 文件 夹 
和 而 BD AppData 2018/8/21 18:10 文件 夹 
浊 EI DD Deployment 2018/9/4 11:23 文件 夹 
日 园 库 DD packages 2018/9/4 11:23 文件 夹 
加 图 视频 上 paylouds 2018/9/4 11:23 文件 来 
田 转 图 片 B ?eaoe 2009/7/14 11:20 ”文件 夹 
加 四 Sn 上 Proprw Files 2018/10/18 10:29 ”文件 夹 
J 音乐 旧 Progr Files (x86) 2018/12/3 10:45 ”文件 夹 
BD resources 2018/9/4 11:23 文件 夹 
DD safenon 2018/11/22 10:18 。 文件 来 
旧 Yinaoms 2018/12/4 9:24 文件 夹 
起 用户 ef 15:13 六 伯 在 二 
-| 全 部 Axure RP 文件 (rp; | 
[EEC 
图 2-32 “打开 ”对话 杠 
“保存 ”命令 (或 按 Ctrl 十 S 组 合 键 ), 即 可 弹出 “另存 为 "对 话 框 ,如 图 2-33 所 示 。 
在 “文件 名 ”文本 框 中 输入 要 保存 的 文件 名 , 单 击 “ 保 存 ” 按 钮 . 即 可 完成 保存 。 当 用 户 完 
成 第 一 次 保存 操作 后 执行 “保存 ”命令 , 则 不 会 弹出 “另存 为 "对话 框 ,Axure 会 直接 保存 文 


件 。 如 果 用 户 既 想 保存 当前 内 容 , 又 不 想 覆 盖 原 来 的 内 容 , 则 可 以 执行 “文件 ”>“ 另 存 为 ” 命 


令 ( 或 按 Ctrl 十 Shift 十 S 组 合 键 ) , 即 可 弹出 “另存 为 "对话 框 。 
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OO [en FE 


组 织 ” ”新 建文 件 夹 Ev 
是 最 近 访 9 位 置 到 司 帮 称 国 修改 日 其 | 类 型 
同 库 上 产品 经 理 准备 2018/12/5 13:18 文件 夹 
国 视频 上 第 五 章 hxure 原 型 图 制作 技法 2018/12/6 18: 文件 夹 
图 图 片 遇 图 标 2018/12/5 9:09 文件 来 
汉文 档 
1 县 图 片 2018/12/5 11:27 ”文件 夹 
由 Ed 站 低 保 真 rp 2018/12/4 17:51 。 xure R 
四 高 保育 r 2018/12/5 11:29 。 kxare BR | 
法 计算 机 zh 首页 王 .rp 2018/12/3 16:04 Axure EP 
名 本 tm 二 C:) 
Ea 软件 0:) 
a 文档 @:) 
3 到 到 划 
文件 名 0: S| 
保存 类 型 0) [Axure RF 文件 erp) | 


xl 至 | 


图 2-33 “另存 为 "对 话 框 


注意 : 执行 “另存 为 ”命令 时 ,车 将 新 文件 保存 在 相同 的 文件 夹 内 , 则 文件 名 不 能 和 原来 
的 文件 名 相同 ,否则 将 会 覆盖 原来 的 文件 ,或 者 不 能 保存 。 


4. 预览 


预览 就 是 将 制作 好 的 原型 图 在 浏览 器 上 显示 出 来 以 进行 查看 。 在 Axure 中 ,执行 “发 
布 ">“ 预 览 ” 命 令 ( 或 按 F5 键 ), 即 可 在 默认 浏览 器 中 预览 效果 。 若 想 更 改 浏览 器 , 则 执行 
“发 布 ? 一 “预览 选项 ”命令 , 即 可 弹出 预览 选项 ?对话 框 ,如 图 2-34 所 示 。 单 击 “ 预 览 "按钮 ， 
即 可 在 浏览 器 中 查看 。 


划 
选择 要 预览 原型 的 设置 
HTML 1( 默 认 ) ”| 相生 


图 2-34 “预览 选项 ”对 话 框 


在 “预览 选项 ”对 话 框 中 ,可 以 选择 打开 页 面 的 浏览 器 ,还 可 以 设置 页 面 的 边栏 。 图 2-35 一 
图 2-38 即 为 4 种 边栏 样式 的 显示 效果 。 
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图 2-36 “关闭 页 面 "样式 的 效果 


€ 129.0.0.4: J a 下 回 食 | 为 三 
QQ@ 三 日 
由 面 四 中 
全 品 下 
图 2-37 “边栏 最 小 化 ”样式 的 效果 图 2-38 “没有 边栏 "样式 的 效果 


5. 生成 原型 文件 


在 Axure 中 执行 “发 布 ”生成 原型 文件 ”命令 (或 按 F8 键 ), 即 可 弹出 “生成 HTML” 
对 话 框 ,如 图 2-39 所 示 。 单 击 “ 生 成 ”按钮 , 即 可 生成 原型 文件 。 

在 图 2-39 中 可 以 看 到 ,在 设置 HTML 选项 区 域 .有 一 个 “手机 /移动 设备 "选项, 单 击 此 
选项 后 ,在 对 话 框 右 侧 设置 参数 ,就 可 以 用 手机 或 移动 设备 查看 Axure 原型 文件 了 。 


6. 发 布 


在 Axure 中 执行 “发 布 " 一 “发 布 到 AxShare” 命 令 ( 或 按 F6 键 ), 即 可 弹出 “发 布 到 
AxShare” 对 话 框 ,如 图 2-40 所 示 。 完 成 相应 设置 后 单 击 “ 发 布 " 按 钮 即 可 。 如 果 是 第 一 次 发 
布 ,会 弹出 “登录 ”对 话 框 ,如 果 没 有 账号 , 则 需 创建 一 个 。 输 入 账号 (一 般 以 Email 作为 账 
号 ) ,密码 , 单 击 “ 确 定 ” 按 钮 即 可 发 布 原型 文件 ,如 图 2-41 所 示 。 

发 布 成 功 后 ,在 Publishing to Axure Share 对 话 框 中 单 击 copy 按钮 复制 网 址 ,可 以 将 
已 发 布 的 Axure Share 链接 粘贴 到 浏览 器 地 址 栏 中 进行 预览 ,如 图 2-42 所 示 。 这 里 要 注意 
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EI 过 


单 击 选择 文件 
的 存储 位 置 


设置 HTML 选 项 


图 2-40 “发 布 到 AxShare" 对 话 框 


的 是 ,由 于 Axure 的 服务 器 在 中 国境 外 .因此 打开 的 速度 有 些 慢 。 
7. 辅助 线 和 网 格 


辅助 线 对 保持 布局 与 对 齐 元 件 有 非常 大 的 帮助 。Axure 中 的 辅助 线 有 全 局 辅助 线 和 页 
面 辅助 线 , 如 图 2-43 所 示 。 
。 全 局 辅助 线 : 作用 于 所 有 页 面 ,其 添加 方法 是 按 住 Ctrl 键 ,再 将 水 平 或 垂直 辅助 线 
拖 忠 至 页 面 编辑 区 ,这 样 所 有 的 页 面 就 都 创建 了 辅助 线 。 


。 页 面 辅助 线 : 作用 于 当前 页 面 ,其 添加 方法 是 将 水 平 或 垂直 辅助 线 拖 忠 至 页 面 编辑 
区 ,线条 为 绿色 。 
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诉 登 录 


Gard 
登录 您 的 账户 
Log in to publish and host files with Axure Share. Share prototypes with 


your team and with clients. Co-author protoypes and specifications (Team 
and Enteprise Editions only) 


— 


图 2-41 “登录 "对 话 框 


Publishing to Axure Share 
Tour Axure Share link is- 
httpsJn3f83 axshare coryfkc=2 
同 不 过 站 点 地 加 
念 可 以 在 继续 使 用 Axure RF 天 5 发 布 。 


Generation Successful 


页 面 辅助 线 


l | 


1 


全 局 辅助 线 


图 2-43 全 局 辅助 线 和 页 面 辅助 线 
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网 格 的 作用 和 辅助 线 类 似 , 可 以 使 我 们 更 准确 地 对 齐 元 件 , 执 行 “布局 >“ 网 格 和 辅助 
线 ” 一 “显示 网 格 ” 命 令 ( 或 按 Ctrl 十 ' 组 合 键 ), 即 可 显示 或 隐藏 网 格 (该 命令 是 一 个 开关 命 
令 ), 如 图 2-44 所 示 。 还 可 以 通过 “网 格 设置 ”命令 对 网 格 的 样式 进行 设置 ,例如 网 格 的 间 
距 、 样 式 及 颜色 ,如 图 2-45 所 示 。 


区 是 风 ] 发 布 f) iB 和 0) 账号 WO) 帮助 00 


VY | 显示 网 格 00 Com 


| 
| FB) ct 
Le ”| Y 号 未 页 面 和 有线 吕 ca 


| Y Saap te Wideets 
Widget Snap Settings 


图 2-44 显示 网 格 


有 m 网 格 对 话 杠 Ed| 
EY nw Aix 


国 显示 网 格 


图 2-45 网 格 设置 


8. 常用 快捷 键 


在 Axure 的 基本 操作 中 ,经 常会 用 到 一 些 快 捷 键 ,这些 快捷 键 会 帮助 设计 者 更 快速 地 
制图 。 表 2-1 为 Axure 的 常用 快捷 键 。 
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表 2-1 Axure 的 常用 快捷 键 


常用 快捷 键 命令 
Ctrl 十 N 新 建文 档 
Ctrl 十 O 打开 文档 
Ctrl+S 保存 文档 
Ctrl 十 Shift 十 S 另存 为 文档 
F5 预览 
Ctrl 十 F5 预览 选项 
F6 发 布 到 Axure Share 
F8 生成 原型 文件 
Ctrl 十 C 复制 选中 的 元 件 
Ctrl 十 拖 电 元 件 复制 并 移动 选中 的 元 件 
Shift 十 抑 奥 元 件 平行 /垂直 移动 选中 的 元 件 
Ctrl 十 Shift 十 拖 电 元 件 复制 并 平行 /垂直 移动 选中 的 元 件 
一 /二 /4 /1 移动 选中 元 件 的 1 个 像素 
Shift 十 一 /二 /4 /个 移动 选中 元 件 的 10 个 像素 
Ctrl 十 V 粘贴 
Ctrl 十 X 剪 切 
Ctrl 十 在 标尺 上 拖 中 鼠标 全 局 辅助 线 
Ctrl 十 Z 撤销 
Ctrl 十 A 全 选 
i 显示 /隐藏 网 格 
Cai 二 显示 /隐藏 全 局 辅助 线 
Ctrl 十 ， 显示 /隐藏 页 面 辅助 线 
Shift 十 拖 跑 元 件 边 角 等 比 缩放 
Ctrl 十 拖 奥 元 件 边 角 旋转 元 件 
Ctrl 十 ] 上 移 一 层 
Ctrl 十 [ 下 移 一 层 
Ctrl 十 Shift 十 ] 置 于 顶层 
Ctrl 十 Shift 十 [ 置 于 底层 


2.4.2 元 件 的 基本 操作 


熟悉 元 件 的 基本 操作 ,是 掌握 Axure 软件 操作 的 第 一 步 。 在 Axure 软件 中 ,所 有 的 元 
件 都 需要 拖 和 人 页面 编 辑 区 中 使 用 。 在 使 用 元 件 时 ,不 仅 可 以 进行 一 些 基本 操作 ,如 命名 、 编 
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组 ,快捷 操作 、 设 置 样式 、 编 辑 元 件 文字 、 创 建 和 载 人 元 件 库 . 导 和 人 图像. 控制 表单 等 ,还 能 创 
建 和 载 人 元 件 库 。 下 面 将 对 元 件 的 基本 操作 进行 具体 讲解 。 


1. 元 件 的 命名 、 编 组 和 快捷 操作 


在 使 用 元 件 时 ,可 以 为 元 件 命名 ,并 对 有 关联 的 元 件 进行 编组 。 

1) 为 元 件 命名 

通过 为 元 件 命名 可 以 帮助 设计 者 在 页 面 中 快速 找到 元 件 。 将 元 件 拖 到 页 面 编辑 区 后 ， 
选中 元 件 , 在 检查 器 的 “属性 ”面板 中 定义 该 元 件 的 名 称 , 如 图 2-46 所 示 。 


图 2-46 为 元 件 定义 名 称 


2) 元 件 编组 
在 页 面 编辑 区 内 会 存在 很 多 元 件 ,为 了 方便 选择 ,往往 会 对 元 件 进行 编组 。 选 中 元 件 并 
右 击 , 在 弹出 的 快捷 菜单 中 选择 “组 合 "命令 (或 按 Ctrl 十 G 组 合 键 ) 进 行 编组 。 若 想 取消 编 
组 , 则 右 击 ,在 弹出 的 快捷 菜单 中 选择 “取消 组 合 ” 命 令 ( 或 按 Ctrl 十 Shift 十 G 组 合 键 ) 即 可 ， 
如 图 2-47 所 示 。 i 
3) 复制 . 剪 切 和 粘贴 元 件 罗 要 抽 
复制 , 剪 切 和 烙 贴 是 各 种 软件 中 都 很 常用 的 操作 ,选中 |” 时 中 
页 面 中 的 元 件 并 右 击 ,在 弹出 的 快捷 菜单 中 选择 相应 的 命 
令 即 可 ,也 可 以 按 Ctrl 十 C( 复 制 ) 组 合 键 .Ctrl 十 X( 剪 切 ) 组 
合 键 \.Ctrl 十 V( 粘 贴 ) 组 合 键 进行 操作 。 Ms 


设 为 隐藏 


Ctrlt6 


2. 设置 元 件 样式 cultshiftte 


元 件 的 样式 包括 位 置 、 尺 寸 、 排 列 、 颜 色 、 透 明度 等 . 具 
体 介 绍 如 下 。 

1) 设置 元 件 位置 和 尺寸 

元 件 的 位 置 和 尺寸 可 以 通过 两 个 方法 进行 调整 。 第 一 图 2-47 元 件 编组 操作 
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个 方法 是 鼠标 拖 电 来 调整 , 若 想 按 原 有 比例 更 改元 件 大 小 , 按 住 Shift 键 ,同时 拖 忠 图 像 元 
件 边 角 的 小 手柄 BB , 即 可 按 比例 缩放 元 件 ,如 图 2-48 所 示 。 第 二 个 方法 是 在 样式 工具 栏 的 
右上 方 或 检查 器 的 “样式 ”面板 中 输入 数值 进行 调整 ,如 图 2-49 所 示 。 


一 一 向 su jz | lo | lr | 
x Y W 后 HH 
并 


"| lalel 回国 


图 2-49 在 工具 栏 或 检查 器 面板 中 设置 位 置 及 尺寸 


。X( 或 x): 设置 元 件 在 画布 中 的 X 坐标 值 。 

。Y( 或 y): 设置 元 件 在 画布 中 的 Y 坐标 值 。 

。 W( 或 w): 设置 元 件 的 宽度 。 

。H( 或 h): 设置 元 件 的 高 度 。 

在 输入 数值 调整 元 件 尺 寸 时 ,为 了 让 元 件 按 比 例 缩放 ,可 以 单 击 保 持 宽 高 比例 按钮 呵 。 

2) 设置 元 件 对 齐 和 分 布 方 式 

选中 要 对 齐 的 元 件 后 ,在 主 工 具 栏 中 单 击 “ 对 齐 ” 按 钮 
| 国 ,在 弹出 的 下 拉 菜 单 中 选择 相应 的 选项 即 可 ,如 图 2-50 
所 示 。 

分 布 分 为 横向 分 布 和 纵向 分 布 。 横 向 分 布 是 指 元 件 在 
水 平方 向 均匀 分 布 ,纵向 分 布 是 指 元 件 在 垂直 方向 的 均匀 
分 布 。 选 中 要 分 布 的 元 件 后 .在 主 工具 栏 中 单 击 “ 分 布 ” 按 
钮 加 .在 弹出 的 下 拉 莱 单 中 选择 相应 的 选项 即 可 ,如 图 2-51 


所 示 。 


Ej] mm as 
2 
左 对 齐 中 CtrltAlttL 


左右 居中 C) CtrltAlttC 
有 对 齐 信 ) CtrltAttR 


卫 世 开 


顶部 对 齐 CD) Ctrl+ALtHT 
上 下 居中 0) Ctrl+HALtHI 
底部 对 齐 8) Ctrl+ALttB 


[2 


2-50 “对 齐 ” 按 钮 的 下 拉 莱 单 
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这 里 需要 注意 的 是 ,使 用 分 布 功能 时 ,页 面 中 的 元 件 必 须 是 3 个 或 3 个 以 上 。 图 2-52 
即 为 横向 分 布 前 后 的 效果 。 


寒假 器 假 年 假 ”周末 十 -长 假 
(a) 分 布 前 
CtrlShifttt 寒假 嗜 假 年 假 周末 十 一 长 假 
Ctrl+Shift+U 
(b) 分 布 后 
图 2-51 “分 布 " 按 钮 的 下 拉 菜 单 图 2-52 横向 分 布 前 后 的 效果 


3) 设置 元 件 的 旋转 角度 

在 页 面 编辑 区 内 选中 元 件 ,将 鼠标 光标 放置 在 元 件 的 边 角 处 , 按 住 Ctrl 键 , 当 鼠 标 光标 
变 成 图 时 , 按 住 鼠标 左 键 拖 忠 即 可 ,如 图 2-53 所 示 。 

4) 水 平 翻转 和 垂直 翻转 

在 页 面 编辑 区 内 选中 元 件 ,在 检查 器 的 “样式 ”面板 内 单 击 水 平 翻 转 按钮 小 或 垂直 翻转 
按钮 挟 即 可 ,如 图 2-54 所 示 。 


2 加 


[= 

[=| [x831 下 543 
有 w:35 h:32 

中 


图 2-53 旋转 元 件 图 2-54 ”水平 /垂直 翻转 


5) 设置 元 件 的 层级 排列 顺序 
若 想 把 页 面 编辑 区 内 底层 的 元 件 放置 在 顶层 , 右 击 元 件 , 在 弹出 的 快捷 菜单 中 ,选择 “ 顺 
序 ” 命 令 , 再 接着 选择 相应 的 命令 即 可 ,如 图 2-55 所 示 , 方 框 标示 的 是 对 应 的 快捷 键 。 


二 eraro 


顺序 加 ) 


Ceatshisd] | 
CtrlShiftt[ 
Ctrlt] 

转 搁 为 动态 面板 0) Ctrlt[ 


转换 为 母 版 中) 


图 2-55 设置 层级 排列 顺序 


6) 设置 元 件 的 颜色 及 不 透明 度 

在 页 面 编辑 区 内 选中 元 件 ,在 样式 工具 栏 或 检查 器 的 “样式 ?面板 中 的 颜色 选项 , 即 可 弹 
出 如 图 2-56 所 示 的 颜色 面板 。 

在 颜色 面板 中 可 以 进行 以 下 设置 : 

。 填充 类 型 : 用 于 设置 单 色 渐变 颜色 填充 。 

。 吸管 工具 : 用 于 吸取 颜色 。 

。 色 值 : 用 于 输入 颜色 值 或 直接 进行 颜色 修改 。 


ui 
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图 2-56 ”颜色 面板 
。 无 填充 : 用 于 清空 填充 颜色 。 
。 设置 自 定义 颜色 : 单 击 “ 更 多 ”按钮 ,可 以 选择 该 面板 的 颜色 以 外 的 其 他 颜色 。 
。 不 透明 度 : 用 于 设置 元 件 的 不 透明 度 。 
7) 设置 形状 


(1) 设置 圆 角 。 
为 矩形 类 元 件 设置 圆 角 ,可 以 让 页 面 风 格 更 加 柔和 。 可 以 通过 拖 动 元 件 左上 方 的 倒 三 


角 Y 调整 圆 角 的 大 小 ,如 图 2-57 所 示 。 


图 2-57 圆 角 调整 前 后 对 比 


也 可 以 在 检查 器 的 “样式 ”面板 中 对 圆 角 进行 设置 ,如 图 2-58 所 示 。 在 该 处 设置 圆 角 可 
以 取消 部 分 圆 角 ,例如 ,将 圆 角 半径 设置 为 0, 可 以 取消 部 分 圆 角 。 分 别 取 消 元 件 左 上 角 , 右 


上 角 、 左 下 角 、 右 下 角 圆 角 , 效 果 如 图 2-59 所 示 。 


图 2-58 设置 圆 角 
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2-59 分 别 取消 元 件 左 上 角 、` 右 上 角 \ 左 下角、 右 下 角 圆 角 的 效果 


(2) 更 改 形状 。 

单 击 元 件 右上 方 的 小 圆 形 息 , 即 可 弹出 形状 菜单 ,如 图 2-60 所 示 。 单 击 任意 一 个 形状 ， 
即 可 更 改 当前 元 件 的 形状 ,元 件 改变 形状 后 的 大 小 和 原来 的 大 小 相同 。 例 如 ,将 占 位 符 元 件 
改 为 五 角 星 的 形状 ,图 2-61 为 更 改 前 后 的 对 比 。 


图 2-60 更 改 形状 


o so 
o 0o o 
更 改 前 更 改 后 


图 2-61 元 件 更 改 形状 前 后 对 比 


(3) 设置 线段 ,箭头 和 元 件 边框 样式 。 
线段 ,箭头 和 元 件 边框 的 样式 可 以 在 样式 工具 栏 以 及 检查 器 的 “样式 ”面板 中 进行 设置 ， 
如 图 2-62 所 示 。 


3. 编辑 元 件 文字 
在 元 件 中 可 以 编辑 和 插入 相关 文字 ,并 调整 文字 的 字体 、 大 小 、 颜 色 、 边 距 \ 行 距 和 对 齐 
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人 HE 
图 2-62 设置 线段 .箭头 和 元 件 边框 样式 


方式 等 ,具体 讲解 如 下 。 
1) 添加 /编辑 文字 . 
给 一 般 元 件 添加 /编辑 文字 有 两 种 方式 : 一 种 与 在 
图 像 元 件 中 添加 /编辑 文字 一 样 , 右 击 元 件 , 在 快捷 菜单 
中 选择 “编辑 文字 "命令 ; 另 一 种 则 是 双击 元 件 后 添加 / 和 
编辑 文字 ,如 图 2-63 所 示 。 
2) 设置 文字 样式 、 边 距 ,行距 和 对 齐 方式 
选中 元 件 即 可 在 样式 工具 栏 或 检查 器 的 “样式 " 面 图 2-63 双击 元 件 后 添加 /编辑 文字 
板 中 对 文字 的 字体 大小、 颜色, 边 距 .行距 和 对 齐 方式 
等 进行 编辑 ,如 图 2-64 所 示 。 


下 DIC lel easesas lrleslesle 
| vom 四 i 
了 本 本 本 到 tt (五 房 星 名 到 
属性 备注 
文字 样式 各 本 
呈 [ norma -| 
TT Ge 
行径 ~- 
=QR er = 
| : 和 斌 | 一 [LEE ES 司 
司 ] 5 二 国 上 园 = 国 下 国 
到 Eee ， 国 
往 2 


图 2-64 更 改 文字 样式 
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4. 创建 和 载 入 元 件 库 


在 使 用 元 件 时 ,用 户 可 以 通过 创建 和 载 人 元 件 库 操作 添加 自己 需要 的 元 件 。 创 建 和 载 
入 元 件 库 的 方法 十 分 简单 ,具体 介绍 如 下 。 

1) 创建 元 件 库 

在 库 面 板 中 单 击 选项 按钮 号, 弹出 如 图 2-65 所 示 的 菜单 ,选择 “创建 元 件 库 ” 命 令 。 

在 弹出 的 对 话 框 中 输入 文件 名 后 , 单 击 “ 确 定 ” 按 钮 即 可 打开 新 的 . rplib 格式 的 文件 ,用 
户 可 以 在 页 面 编辑 区 中 绘制 图 形 或 使 用 图 片 素材 作为 元 件 。 

2) 载 入 元件 库 

在 库 面板 中 单 击 选项 按钮 号 ,在 下 拉 菜 单 中 选择 “ 载 入 元 件 库 ”命令 ,如 图 2-66 所 示 , 即 
可 载 人 已 经 下 载 的 元 件 库 。 载 入 元 件 库 后 ,新 元 件 就 会 出 现在 库 面板 中 。 


图 2-65 ”选择 “创建 元 件 库 ” 命 令 图 2-66 选择 “ 载 入 元 件 库 "命令 


值得 一 提 的 是 , 当 载 入 元 件 库 时 ,会 激活 “编辑 元 件 库 “ 刷 新 元 件 库 “种 载 元 件 库 ”3 个 
命令 ,这 3 个 命令 主要 用 于 对 元 件 库 进行 编辑 、 刷 新 、 印 载 操作 。 


5. 导入 图 像 


拖 忠 一 个 图 像 元 件 至 页 面 编 辑 区 ,双击 元 件 后 ,在 弹出 的 “打开 ”对 话 框 中 选择 要 导入 的 
图 片 ,可 以 是 任何 尺寸 的 JPG、GIF、.PNG、BMP 和 SVG 图 片 ,如 图 2-67 所 示 。 


上 司 
全 加 -区 -HR SE |r we c) | 
9 日 
组 织 > 新 尘 文 件 夫 三 ~- 
人 六 tk 让 印 - lp | 地. 
- 是 B3505of doome 2018/4/24 14:4 。。 文件 来 
而 
re BB MerDats 2018/8/21 18:10 文件 夹 
i BB neploment 2018/9/4 11:23 文件 夹 
加 乓 BF paisees 2018/914 11:23 文人 
目 视 点 B perlonds 2018/914 11:23 。。 交 件 夹 
加 图 上 peraoes 20091T114 11:20 。。 交 件 天 
es 站 Poem Tiles 2018/10/18 10:29 。 文件 夹 
二 公车 文档 站 more Files eee) 2019/1/3 16:29 文件 夫 
闻 迅雷 下 载 Bresourees 2019/9/4 11:23 文件 夫 
由 音乐 上 :ee 2018/11/22 10:18 。 文件 志 
> Brindms 2019/5/27 9:25 文件 夹 
Se es 用 户 at 文件 加 
sm 司 |al image fies Coif"jpg:"jp 到 
Exeyll sal 


图 2-67 导入 图 片 
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多 学 一 招 : Axure 中 图 像 的 优化 
在 Axure 中 ,图 像 优化 的 方法 分 为 两 种 : 一 种 是 系统 自动 优化 , 另 一 种 是 手动 优化 , 具 
体 如 下 。 
ie | 


池 儿 滥 是 号 歼 应 用 程序 运行 组 介 


(1) 自动 优化 。 当 导入 的 图 像 尺寸 过 大 时 ,会 弹出 询 
问 是 否 优化 图 像 的 对 话 框 ,如 图 2-68 所 示 。 如 果 在 此 时 选 
择优 化 , 则 优化 后 的 图 像 分 辨 率 会 变 低 。 

(2) 手动 优化 。 对 于 一 些 系统 没有 自动 提示 优化 的 图 
像 , 可 以 进行 手动 优化 。 选 中 需要 优化 的 图 像 并 右 击 , 在 
弹出 的 快捷 菜单 中 选择 “优化 图 像 ” 命 令 , 即 可 对 图 像 进行 
优化 ,如 图 2-69 所 示 。 


Caw ] sm | 


图 2-68 询问 是 否 优化 
图 像 的 对 话 框 


其 用 

选中 

设置 选项 组 名 称 . 
工具 提示 . 


组 全 0) 


顺序 中 ) 


转 接 为 日 版 全 
转换 为 动态 面 白 ) 


图 2-69 优化 图 像 
6. 控制 表单 
gr 控制 表单 中 主要 包含 文本 框 \ 复 选 框 和 单 选 按钮 3 种 
类 型 元 件 。 
(Text = 1) 文本 框 


盖 一 一 一 J 文本 框 通常 作为 登录 .注册 等 页 面 的 输入 元 件 使 用 ,其 
本 身 对 样式 的 设置 很 有 限 ,不 能 设置 边框 样式 .阴影 等 ,但 

Hide hint afler @ Typing 〇 获得 集 点 是 可 以 在 检查 器 的 “属性 ”面板 中 设置 文本 框 的 类 型 .文字 

最 大 文字 数 提示 和 提示 样式 等 ,如 图 2-70 所 示 。 在 Axure 中 ,文本 框 

一 分 为 单行 文本 框 和 多 行文 本 框 两 类 ,二 者 的 用 法 基本 一 致 ， 
图 2-70 单行 文本 框 设 置 这 里 不 再 著述 。 
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对 图 2-70 所 示 的 面板 中 的 常用 选项 介绍 如 下 : 
。 类 型 : 用 于 更 改 文 本 输入 类 型 ,如 文本 、 密 码 、 电 子 邮 件 、 数 字 、 搜 索 等 。 图 2-71 为 4 
种 不 同类 型 的 文本 框 样式 ,从 上 至 下 依次 用 于 输入 文本 、 密 码 、 电 子 邮 件 和 数字 。 


图 2-71 不 同类 型 的 文本 框 样式 


。 提示: 用 于 提示 用 户 的 说 明文 字 , 当 有 文本 输入 时 提示 会 自动 消失 。 

。 提示 样式 : 用 于 设置 提示 文字 的 样式 ,如 文字 大 小 、 颜 色 等 。 

。 最 大 文字 数 : 用 于 设置 最 多 可 输入 的 文字 个 数 。 

2) 复 选 框 

复 选 框 允许 用 户 选择 一 个 或 多 个 选项 。 使 用 时 ,直接 将 其 拖 电 至 页 面 编辑 区 即 可 。 

3) 单 选 按钮 

单 选 按钮 只 允许 用 户 选择 一 个 选项 。 单 选 按钮 和 文本 框 类 似 , 不 能 设置 样式 ,但 是 可 以 在 检 
查 器 的 “属性 ”面板 中 指定 单 选 按钮 组 的 名 称 以 及 设置 单 选 按 钮 的 对 齐 样式 等 ,如 图 2-72 所 示 。 

需要 注意 的 是 , 当 把 单 选 按钮 拖 电 至 页 面 编辑 区 后 ,每 个 单 选 按钮 都 可 以 选中 ,如 图 2-73 
所 示 。 


~ 单 迁 控 钮 
i ee 
固 选 中 里 单 渤 按 乌 
对 齐 按钮 ”图 左 侧 。 〇 右 便 加 单 远 按钮 
图 2-72 单 选 按钮 设置 图 2-73 未 成 组 时 每 个 单 选 按钮 都 可 以 选中 


若 想 实现 单 选 效 果 ,需要 指定 单 选 按钮 组 。 全 部 选中 要 放 在 一 组 中 的 单 选 按钮 并 右 击 ， 
在 弹出 的 快捷 菜单 中 选择 “指定 单 选 按钮 组 ”命令 .如 图 2-74 所 示 。 

设置 组 名 (组 名 可 以 是 拼音 、 英 文字 母 .数字 、 中 文字 符 等 ) 后 , 单 选 按钮 就 具有 单 选 功能 
了 ,只 能 选择 一 个 单 选 按钮 ,如 图 2-75 所 示 。 


编 加 文字 
指定 单 和 反馈 组 

选中 

pa 自 单 渤 按 刘 
捧 用 回 单 运 按 注 
指定 提交 扫 包 

工具 提示 提单 远 按 乌 


图 2-74 选择 “指定 单 选 按钮 组 ”命令 图 2-75 成 组 后 的 单 选 按钮 只 能 选择 一 个 
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阶段 案例 : 载 人 自 定义 元 件 库 


下 面 通过 一 个 载 和 人 自 定义 元 件 的 案例 来 巩固 元 件 的 基本 操作 知识 。 案 例 的 最 终 效果 如 
图 2-76 所 示 。 
图 2-76 所 示 为 一 个 进度 指示 器 ,可 以 表示 5 种 进度 状态 ,这 5 种 状态 的 图 形 可 以 分 别 
定义 为 5 个 元 件 , 并 载 人 元 件 库 , 具 体 实 现 步骤 如 下 。 
Stepl 在 库 面板 中 单 击 选项 按钮 三, 在 下 拉 菜 单 中 选择 “创建 元 件 库 ” 命 令 , 如 图 2-77 
所 示 , 即 可 弹出 “保存 Axure RP 库 ” 对 话 框 ,选择 保存 目录 并 为 . rplib 文件 命 
名 ,如 图 2-78 所 示 。 


下 载 元 件 库 0). 


Y Defaut > 公用 


载 入 元 件 库 由 
从 Axure Share 加 载 


没有 与 搜索 条 件 匹配 的 项 * 


河床 
图 视频 
国 图片 
国 闵 冰 
司 迅雷 下 载 
二 音乐 
谭 计算 机 
外 本 jb 熏 5:) 
软件 0:) 
is me.) 划 aLE | 
Hm: 可 
保存 类 型 ji: [kewe m 元 HR 人 rit) 可 


-aaa Ca | 


图 2-78 为 元 件 库 命名 


Step2 ”保存 好 . rplib 文件 后 ,Axure 会 打开 一 个 新 的 窗口 ,如 图 2-79 所 示 。 
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图 2-79 Axure 创建 元 件 库 窗口 


Step3 ”选中 “新 元 件 1” 页 面 并 右 击 ,在 弹出 的 快捷 菜单 中 选择 “ 重 命名 ”命令 ,将 元 件 重 
命名 为 “75%”, 如 图 2-80 所 示 。 

Step4 ”在 库 面 板 中 将 元 件 拖 忠 至 页 面 编辑 区 ,调整 大 小 为 70 像素 X70 像素 ,如 图 2-81 
所 示 。 

Step5 “将 元 件 填充 颜色 设 为 蓝 色 (# 0066cc) ,边框 颜色 设 为 无 ,如 图 2-82 所 示 。 


() 
D 7% 
图 2-80 元 件 重 命名 图 2-81 绘制 元 件 图 2-82 更 改元 件 的 填充 颜色 和 边框 颜色 


Step6 ”选中 元 件 , 单 击 右 上 角 的 @ ,在 弹出 的 面板 中 选择 图 2-83 中 用 方 框 标示 的 形 
状 。 改 变形 状 后 的 元 件 如 图 2-84 所 示 。 


图 2-83 ”改变 形状 图 2-84 改变 形状 后 的 元 件 


59 本 互联 网 产品 设计 思维 与 实践 


Step7 拖 动 © ,将 角度 改 为 90", 如 图 2-85 所 示 。 将 标签 元 件 拖 忠 至 页 面 编 辑 区 ,编辑 
文字 ,并 将 其 颜色 改 为 蓝 色 (#0066cc) ,如 图 2-86 所 示 。 


9 9 75% 
图 2-85 将 切口 角度 改 为 90* 图 2-86 ”编辑 标签 元 件 的 文字 


Step8 单 击 新 增 元 件 按钮 如 ,新 增 元 件 , 将 其 重 命名 为 “50%”, 如 图 2-87 所 示 。 
Step9 按 Step4 一 Step7 的 方法 ,绘制 “50%" 元 件 的 图 形 , 如 图 2-88 所 示 。 


* WidgetLibraryPages H) HQ » 


OD 75% 50% 
D so% 


图 2-87 新 增 元 件 图 2-88 “50%"” 元 件 的 效果 


Step10 ” 按 Step8 和 Step4 一 Step7 的 方法 再 分 别 绘制 “0%”“25%”“100%”3 个 元 件 的 
图 形 ,全 部 5 个 元 件 的 效果 如 图 2-89 所 示 。 


“Pb 


0% 25% 50% 75% 100% 
图 2-89 全 部 5 个 元 件 的 效果 


Stepll 按 Ctrl 二 S 组 合 键 保存 文件 。 在 库 面 板 中 单 击 选项 按钮 三 ,在 下 拉 菜 单 中 选 
择 * 刷 新 元 件 库 ” 命 令 , 即 可 在 库 面 板 中 看 到 刚刚 创建 的 元 件 库 。 至 此 ,新 增 元 
件 库 操作 完成 。 


2.4.3 母 版 的 使 用 


母 版 在 Axure 中 使 用 频率 较 高 ,熟练 掌握 母 版 的 使 用 技巧 ,能够 帮助 设计 者 快速 ,高效 
地 完成 原型 的 制作 。 下 面 将 详细 讲解 创建 母 版 的 方法 和 母 版 的 拖 放行 为 。 


1. 创建 母 版 
包 


建 母 版 的 方法 主要 分 为 两 种 : 一 种 为 新 增 母 版 , 另 一 种 为 转换 母 版 。 
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(1) 新 增 母 版 。 在 母 版 面板 中 单 击 新 增 母 版 按钮 台 , 即 可 新 增 一 个 母 版 ,如 图 2-90 所 
示 。 可 以 为 母 版 命名 ,也 可 以 双击 母 版 ,对 其 进行 编辑 。 

(2) 转换 为 母 版 。 在 页 面 编辑 区 内 ,选中 要 转换 为 母 版 的 元 件 并 右 击 ,在 弹出 的 快捷 菜 
单 中 选择 “转换 为 母 版 命令 , 即 可 弹出 “转换 为 母 版 "对话 框 ,如 图 2-91 所 示 。 在 “新 母 版 名 
称 ” 文 本 框 中 输入 母 版 名 称 , 单 击 “ 继 续 ” 按 钮 完成 相关 设置 ,最 后 单 击 “ 确 定 ” 按 钮 , 母 版 即 创 
建 完成 。 转 换 后 的 母 版 会 出 现在 母 板 面板 中 。 


EE 
请 注重 影响 这 些 元 件 的 交互 析 需 要 更 新 

新 弓 板 公称 | 二 

拖 放行 为 
加 任何 位 置 
负 宇 到 本 二 中 的 位 置 

3 CE 从 本 版 时 志 
Wt 
图 2-90 新 增 母 版 图 2-91 “转换 为 母 版 "对话 框 
2. 母 版 的 拖 放行 为 


由 图 2-91 可 知 , 母 版 包含 3 种 拖 放行 为 , 即 任何 位 置 、 锁 定 到 母 版 中 的 位 置 和 从 母 版 脱 
离 。 下 面 对 这 3 种 拖 放行 为 进行 讲解 。 
。 任何 位 置 : 当 拖 动 母 版 到 页 面 编辑 区 时 ,可 以 任意 指定 母 版 的 位 置 。 
。 锁定 到 母 版 中 的 位 置 : 当 拖 动 母 版 到 页 面 编辑 区 时 , 母 版 会 自动 锁定 到 创建 母 版 时 
的 位 置 。 
。 从 母 版 脱离 : 当 拖 动 母 版 到 页 面 编 辑 区 时 , 母 版 内 的 元 件 会 脱离 母 版 , 变 成 可 编辑 
的 元 件 。 
若 想 改 变 母 版 的 拖 放行 为 ,只 需要 选中 母 版 并 右 击 ,在 弹出 的 快捷 菜单 中 选择 相应 的 命 
令 即 可 ,如 图 2-92 所 示 。 


图 2-92 改变 母 版 拖 放行 为 


多 学 一 招 : 取消 母 版 遮 罩 
添加 到 页 面 中 的 母 版 会 覆盖 着 一 层 粉 色 的 遮 畦 ,这 是 用 来 区 分 母 版 的 ,如 图 2-93 所 示 。 
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若 想 取消 诞 单 ,可 以 选中 母 版 ,执行 “视图 ”~“* 遮 单 ">“ 母 版 "命令 , 即 可 取消 这 层 粉色 的 遮 
覃 。 同 样 ,动态 面板 .图像 热 区 等 的 迹 单 也 可 以 用 "视图 ”人 遮 哩 ?命令 取消 或 显示 ,如 图 2-94 
所 示 。 


内 容 区 项 目 F) 布局 WW) 发 布 P) 团队 0) 账号 OA) 必 助 00 
工具 栏 中 
面板 G) 
重 置 视图 


这 四 0) 

显示 乔 主 ) 

显示 位 置 和 大 小 提示 QL) 

显示 草图 效果 G) 

显示 背景 B) 

标 答 栏 T 图 各 热 区 00 
日 


图 2-93 母 版 遮 单 图 2-94 取消 母 版 遮 章 
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学 习 目标 

。 了 解 产品 需求 。 

。 掌握 进行 产品 需求 分 析 及 梳理 的 方法 。 
。 掌握 撰写 商业 需求 文档 的 方法 。 

。 掌握 撰写 市 场 需求 文档 的 方法 。 


对 于 一 个 产品 经 理 来 说 ,产品 需求 分 析 也 是 非常 重要 的 ,只 有 对 需求 进行 深入 分 析 , 才 
能 够 设计 出 满足 市 场 和 客户 需求 的 产品 ,才能 够 帮助 企业 获取 更 多 的 利益 。 那 么 如 何 才 能 
做 好 产品 的 需求 分 析 呢 ? 具 体 该 怎么 做 呢 ? 本 章 将 对 什么 是 需求 .需求 分 析 的 方法 以 及 需 
求 的 获取 途径 等 相关 知识 进行 详细 讲解 。 


3.1 需求 概述 


一 个 需求 的 形成 要 经 历 一 个 严谨 的 流程 。 好 的 产品 需求 能 帮助 设计 者 准确 地 理解 用 户 
的 需要 和 想法 ,设计 出 正确 的 产品 。 一 个 优秀 的 产品 必定 能 满足 大 多 数 用 户 的 某 种 需求 。 
例如 ,淘宝 满足 了 人 们 是 不 出 户 就 可 以 购物 的 需求 , 美 团 满足 了 人 们 在 家 不 用 动手 即 可 享受 
美味 的 需求 。 那 么 ,什么 是 需求 呢 ? 本 节 就 针对 需求 的 本 质 进行 讲解 。 


3.1.1 什么 是 需求 


在 了 解 需求 之 前 ,要 先知 道 需要 及 欲望 的 含义 。 下 面 对 需 求 和 和 欲望 进行 简单 介绍 。 

需要 是 指 人 在 某 些 基本 方面 没有 得 到 满足 而 产生 的 不 足 或 短缺 的 感觉 。 例 如 一 个 人 饿 
了 就 想 吃 东西 , 渴 了 就 想 喝 水 ,这 就 是 需要 。 

欲望 是 人 的 本 性 产生 的 , 想 达 到 某 种 目的 的 要 求 , 比 需要 更 加 具体 。 例 如 一 个 人 饭 了 想 
吃 一 顿 海鲜 大 餐 , 渴 了 想 喝 鲜 榨 果 汁 , 这 就 是 欲望 。 

在 互联 网 中 ,需求 分 为 用 户 需求 和 产品 需求 。 用 户 需 求 是 用 户 由 欲望 驱使 的 利 已 倾向 ， 
是 有 能 力 实现 的 欲望 。 例 如 一 个 人 想 吃 海鲜 大 餐 , 而 且 他 有 能 力 支付 账单 , 则 可 称 之 为 用 户 
需求 。 产 品 需求 则 是 要 解决 用 户 的 问题 ,发 掘 用 户 的 欲望 ,满足 用 户 的 需求 。 而 从 产品 的 角 
度 来 说 ,现在 人 的 需求 已 经 被 最 大 限度 地 开发 了 ,各 种 产品 琳琅 满目 , 若 想 在 这 些 产 品 中 脱 
颖 而 出 ,就 需要 挖掘 用 户 的 欲望 。 当 用 户 的 基本 需求 已 经 满足 了 以 后 ,设计 产品 的 人 应 该 去 
寻找 并 不 断 地 满足 用 户 的 欲望 ,而 不 应 该 仅仅 局 限于 满足 用 户 需求 。 
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多 学 一 招 : 如 何 描述 用 户 需求 

描述 用 户 需求 时 有 3 个 维度 , 即 目标 用 户 、 使 用 场景 、 用 户 目标 。 简 而 言 之 ,这 3 个 维度 
就 是 “ 谁 ? 在 “什么 情况 ”下 想 要 解决 “什么 问题 ”。 例 如 ,一 个 白领 刚 下班 便 遭遇 恶劣 天 气 , 想 
快速 到 家 。“ 和 白领 "就 是 目标 用 户 ,“ 下 班 遭 遇 恶劣 天 气 ” 就 是 使 用 场景 “ 想 快速 回 到 家 ”就 是 
用 户 的 目标 。 


3.1.2 需求 的 本 质 


人 们 为 了 满足 某 种 欲望 ,常常 通过 一 些 行为 来 达到 目标 ,这 些 欲 望 就 是 需求 的 本 质 。 化 
妆 .锻炼 读书 都 是 需求 的 表象 ,是 满足 需求 的 手段 ; 

而 被 赞美 . 变 强 壮 、 变 聪明 这 些 和 欲望 就 是 需求 的 本 

自我 质 。 根 据 马 斯 洛 需求 层次 理论 ,人 的 需求 分 为 5 个 


实现 需求 
二 层次 ; 生理 需求 .安全 需求 .社交 需求 .尊重 需求 和 
自我 实现 需求 ,如 图 3-1 所 示 。 
社交 需求 对 图 3-1 所 示 的 5 个 层次 的 需求 具体 解释 
如 下 : 
Ee 
。 生 理 需求 : 是 级 别 最 低 .最 具 优 势 的 需求 ,如 
生理 需求 \ 食物 .水 .空气 .性 .健康 。 
ee 。 安 全 需求 : 同样 属于 低级 别 的 需求 ,其 中 包 
括 人 身 安全 、 生 活 稳定 以 及 免 遭 靖 苦 、 威 胁 
或 疾病 等。 


。 社交 需求 : 属于 较 高 层次 的 需求 ,如 对 友谊 、 爱 情 以 及 归属 感 的 需求 。 

。 尊重 需求 : 属于 较 高 层次 的 需求 ,如 成 就 ,名 声 ` 地 位 和 晋升 机 会 等 。 尊 重 需求 既 包 
括 对 成 就 或 自我 价值 的 个 人 感觉 ,也 包括 他 人 对 自己 的 认可 与 尊重 。 

。 自我 实现 需求 : 这 是 最 高 层次 的 需求 ,包括 对 于 真善美 至 高 人 生境 界 的 需求 。 前 面 
4 个 层次 的 需求 都 能 满足 以 后 ,最 高 层次 的 需求 方 能 产生 ,因此 它 是 一 种 衍生 性 需 
求 , 如 实现 自我 价值 ,发挥 潜能 等 。 


3.2 需求 获取 


用 户 研究 的 重点 首先 是 研究 用 户 的 痛 点 , 即 用 户 尚 未 被 满足 而 又 渴望 得 到 满足 的 需求 ; 
其 次 是 研究 用 户 的 特征 ,如 用 户 的 年 龄 ,性别 以 及 相关 的 心理 特点 ,行为 特点 等 。 那 么 ,如 何 
做 用 户 研究 呢 ? 研究 用 户 的 方法 有 两 种 ,分 别 是 定性 分 析 法 和 定量 分 析 法 ,前 者 通常 采用 用 
户 访谈 的 形式 ,后 者 通常 采用 调查 问卷 的 形式 。 下 面 针 对 这 两 种 用 户 研究 的 方法 进行 讲解 。 


3.2.1 用 户 访谈 
用 户 访谈 是 获取 用 户 需 求 的 一 种 方式 ,通常 采用 围绕 着 一 个 特定 的 话题 进行 一 对 一 的 
聊天 形式 ,通过 聊天 发 现 用 户 需 求 。 用 户 访谈 经 常 发 生 在 产品 初期 ,从 用 户 的 角度 出 发 , 确 


定 产品 的 研究 方向 。 那 么 ,如 何 进 行 用 户 访谈 ? 用 户 访 谈 的 流程 是 什么 ? 下 面 对 用 户 访谈 
的 相关 知识 进行 讲解 。 
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1. 用 户 访谈 的 方式 


用 户 访 谈 的 方式 分 为 两 种 : 一 种 是 间接 方式 , 即 与 其 他 熟悉 目标 用 户 或 者 与 目标 用 户 
接触 的 人 员 ( 如 同事 、 朋 友 等 ) 协 作 , 获 取信 息 ; 另 一 种 是 直接 方式 , 即 直接 与 目标 用 户 接触 。 
值得 注意 的 是 ,在 用 户 访谈 之 前 ,一 定 要 明确 访谈 的 目的 ,并 设计 访谈 的 提纲 ,以 便 使 用 户 访 
谈 的 各 个 环节 顺利 展开 。 


2. 用 户 访谈 流程 


用 户 访 谈 一 般 包括 以 下 6 个 环节 : 

(1) 确定 访谈 形式 。 访 谈 形 式 一 般 包括 面对面 访谈 、 电 话 访谈 等 。 如 果 是 面对面 访谈 ， 
访谈 者 需要 考虑 到 自己 的 形象 。 一般 ,针对 互联 网 产品 的 面对面 访谈 ,着 装 可 以 较为 随意 ， 
以 便 访 谈 者 表现 出 较 强 的 亲和力 。 

(2) 明确 访谈 目的 。 访 谈 的 目的 也 就 是 为 什么 要 进行 访谈 ,这 是 访谈 的 首要 问题 ,产品 
经 理 需 要 在 有 明确 目的 的 前 提 下 与 被 访 者 进行 沟通 ,从 而 挖掘 被 访 者 的 特征 和 需求 ,以 便 更 
好 地 分 析 , 从 而 得 出 结论 。 

(3) 设计 访谈 提纲 。 明 确 访 谈 目的 后 ,下 一 步 就 是 编写 访谈 提纲 。 访 谈 提纲 十 分 重要 ， 
它 可 以 帮助 访谈 者 控制 节奏 。 有 的 被 访 者 滔滔 不 绝 ,如 果 没 有 一 条 主线 ,很 可 能 访谈 会 被 带 
偏 。 它 还 可 以 让 被 访 者 感受 到 被 尊重 。 

(4) 用 户 筛选 和 邀请 。 在 邀请 用 户 时 , 尽 可 能 根据 产品 本 身 的 需求 程度 邀请 相关 的 用 户 , 且 
选择 用 户 熟悉 的 场景 进行 访谈 ,这 样 可 以 让 用 户 更 加 放松 ,信息 准确 度 更 高 。 值 得 注意 的 是 , 访 
谈 前 要 通过 电话 确认 用 户 是 否 能 准时 参加 ,以 免 出 现 到 了 约定 时 间 用 户 不 到 场 的 尴 众 场面。 

(5) 现场 访谈 。 在 开始 真正 访谈 之 前 ,可 以 先 说 明 自 己 的 身份 .访谈 的 目的 ` 希 望 用 户 
扮演 的 角色 等 ,这 样 做 能 在 一 定 程度 上 避免 在 访谈 中 跑题 。 如 果 用 户 明 显 跑题 或 有 欺骗 性 
的 回答 时 , 则 可 以 根据 情况 提前 结束 访谈 ,以 免 浪 费时 间 。 

(6) 结果 汇总 与 分 析 。 完 成 访谈 后 ,要 根据 访谈 内 容 进行 分 析 , 得 出 访谈 的 结论 ,例如 ， 
用 户 遇 到 了 哪些 问题 ,为 什么 会 遇 到 这 些 问 题 ,我 们 的 产品 该 如 何 解决 此 问题 ,等 等 。 


3. 访谈 提纲 的 设计 原则 


访谈 提纲 可 以 围绕 现状 、 痛 点 方案 三 大 问题 进行 设计 。 

(1) 现状 : 现在 是 如 何 做 的 ? 

(2) 痛 点 : 遇 到 了 什么 困难 ? 

(3) 方案 : 如 何 解 决 目 前 的 困难 ? 

多 学 一 招 : 访谈 时 需要 注意 的 问题 

。 语言 表达 简单 明了 ,尽量 少 用 专业 词汇 。 被 访 者 一 般 对 专业 词汇 了 解 较 少 ,过 多 的 
专业 术语 容易 变 成 访谈 的 绊脚石 ,进而 使 被 访 者 变 得 不 耐烦 。 

在 访谈 过 程 中 ,可 根据 访谈 的 具体 需要 调整 提纲 上 的 问题 。 

。 要 留心 被 访 者 的 回答 ,密切 关注 被 访 者 回答 问题 的 方式 。 对 话 时 ,应 保持 自然 ,避免 
直接 按照 提纲 来 提问 。 

访谈 的 目的 是 收集 对 产品 有 用 的 信息 ,可 以 根据 访谈 情况 进行 追问 。 
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阶段 案例 : 用 户 访谈 记录 表 


用 户 访谈 前 后 都 需要 填写 访谈 记录 表 , 包 括 项 目 名 称 、 访 谈 目 的 \ 访 谈 方 式 ,访谈 的 时 间 
和 地 点 以 及 被 访 者 的 基本 信息 等 。 访谈 记录 表 最 重要 的 一 部 分 是 用 户 的 现状 、 痛 点 及 解决 
方案 。 用 户 访谈 记录 表 的 模板 如 图 3-2 所 示 。 


用 户 访谈 记录 表 


访谈 项 目 名 称 : 
访谈 目的 
访谈 方式 ，() 电话 。 〈) 面对面 0) 其 他 
访谈 时 间 | 地 点 | | 记录 人 
被 访 者 | 性 别 | | 年 龄 
用 户 现状 
用 户 痛 点 
用 户 解决 方案 
用 户 需求 
产品 需求 


图 3-2 用 户 访谈 记录 表 
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注意 : 访谈 前 要 明确 访问 的 主题 和 目的 ,准备 好 采访 的 问题 ;在 访问 中 要 认真 做 好 记 
录 , 听 取 访 问 对 象 的 意见 和 建议 ;访问 后 要 及 时 整理 采访 记录 ,认真 填写 用 户 访谈 记录 表 。 


3.2.2 调查 问卷 


调查 问卷 又 称 调查 表 或 询问 表 , 是 以 问题 的 形式 系统 地 记载 调查 内 容 的 一 种 方式 。 设 
计 问 卷 是 调查 的 关键 。 良 好 的 问卷 必须 具备 两 个 功能 , 即 能 将 问题 传达 给 被 访 者 和 使 被 访 
者 乐于 回答 。 要 完成 这 两 个 功能 ,设计 问卷 时 应 当 遵循 一 定 的 原则 和 流程 ,运用 一 定 的 技 
巧 。 下 面 针对 问卷 设计 的 原则 和 流程 进行 讲解 。 


1. 调查 问卷 的 发 放 方式 


在 了 解 调查 问卷 设计 的 原则 和 流程 之 前 ,要 了 解 调查 问卷 的 发 放 方 式 。 调 查 问 卷 可 分 
为 纸 质 调查 问卷 和 网 络 调查 问卷 。 纸 质 调查 问卷 就 是 传统 的 调查 问卷 ,调查 公司 通过 雇 人 
来 分 发 这 些 纸 质 调查 问卷 并 回收 答卷 。 这 种 形式 的 调查 问卷 成 本 比较 高 。 网 络 调查 问卷 比 
纸 质 调查 问卷 更 方便 。 在 互联 网 时 代 , 出 现 了 越 来 越 多 的 在 线 调查 网 站 ,如 “问卷 星 “ 问 卷 
网 ”等 均 为 设计 网 络 调 查 问 卷 的 网 站 ,如 图 3-3 和 图 3-4 所 示 。 


只 
考试 
Tog| 2 ~ 
om eo 
| ee 创建 
一 1 表单 Am 360 度 评估 测评 
Oe | | 之 全 之 一 
创建 | he [|_ ehe 


图 3-3 “问卷 星 ” 网 站 


2. 调查 问卷 的 设计 流程 


调查 问卷 的 设计 流程 如 下 : 

(1) 规定 设计 调查 问卷 所 需 的 信息 。 有 助 于 使 调查 问卷 内 容 条 理化 .具体 化 ,进而 使 被 
访 者 详细 地 了 解 本 调查 问卷 的 目的 和 内 容 , 配 合 调查 ,以便 调查 者 获得 有 用 的 信息 。 

(2) 搜集 资料 。 设 计 调 查 问卷 时 ,不 能 凭空 想象 , 若 想 把 调查 问卷 设计 得 较为 完善 , 调 
查 者 需要 了 解 更 多 的 东西 。 搜 集资 料 可 以 帮助 调查 者 了 解 受 访 者 的 经 历 、 习 惯 文 化 水 平 以 
及 对 调查 问卷 内 容 所 涉及 的 知识 的 了 解 程度 等 。 

(3) 确定 每 个 问题 的 内 容 。 每 个 问题 是 什么 ,调查 问卷 应 包括 哪些 问题 ,是 否 全 面 与 切 
中 要 害 。 
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图 3-4 “问卷 网 "网 站 


3. 调查 问卷 的 设计 原则 


调查 问卷 的 设计 原则 如 下 : 

(1) 每 个 问题 只 涵盖 一 个 观念 ,以 免 作答 者 顾此失彼 。 例 如 ,“ 当 你 遇 到 挫折 时 ,你 是 否 
会 努力 不 懈 而 且 尝 试用 新 的 方法 去 解决 ?” 这 个 句子 就 涵盖 了 “努力 不 懈 ” 及 “尝试 用 新 的 方 
法 ”两 个 观念 ,因此 最 好 将 其 改 为 两 个 句子 :“ 当 你 遇 到 挫折 时 ,你 是 否 会 努力 不 懈 去 解决 ?” 
以 及 “ 当 你 遇 到 挫折 时 ,你 是 否 会 尝试 用 新 的 方法 去 解决 ?” 

(2) 不 用 假设 或 猜测 的 语句 。 例 如 ,“ 假 如 你 有 200 万 元 人 民 币 ,你 会 投身 公益 事业 
吗 ?” 对 于 这 种 假设 性 的 问题 ,因为 作答 者 有 非常 大 的 想象 空间 ,以 至 于 所 得 的 结果 不 易 归纳 
和 解释 ,在 实际 应 用 上 价值 并 不 高 。 

(3) 先 易 后 难 。 问 题 的 排列 应 有 一 定 的 逻辑 顺序 ,如 先 易 后 难 、 先 具体 后 抽象 ,这 样 比 
较 符合 作答 者 的 思维 习惯 。 如 果 第 一 个 问题 就 是 “你 对 这 个 App 有 什么 意见 或 建议 ?” 这 会 
让 作答 者 毫 无 头绪 ,从 而 放弃 作答 。 

(4) 语言 通俗 易 懂 。 问 题 的 表达 应 力求 清楚 明了 ,不 要 造成 作答 者 误解 。 语 言 也 要 简单 易 
懂 , 符 合作 答 者 的 理解 能 力 和 认 知 能 力 ,避免 使 用 专业 术语 ,尽量 使 作答 者 能 节省 作答 的 时 间 。 

(5) 控制 问卷 的 长 度 。 句 子 避 免 过 长 ,通常 作答 者 在 填写 调查 问卷 时 ,都 不 希望 花 太 多 
的 时 间 。 假 如 问卷 的 问题 简单 清楚 、 一 目 了 然 ,作答 者 的 配合 度 就 会 较 高 ;反之 , 若 问题 复杂 
又 元 长 ,作答 者 有 可 能 会 应 付 了 事 。 回 答 问卷 的 总 时 间 应 控制 在 20min 左右 。 


阶段 案例 : 如 何 设计 调查 问卷 
调查 问卷 在 形式 上 由 6 部 分 组 成 : 问卷 标题 .导语 .被 调 查 者 基本 信息 .主体 内 容 .结语 


和 调查 基本 信息 ,如 图 3-5 所 示 。 
(1) 问卷 标题 。 应 遵循 明确 、 简 洁 的 原则 。 例 如 ,“ 关 于 洗车 频率 、 价 格 、 方 式 的 调查 问 
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问卷 标题 一 一 一 一 一 -| 。 《家 有 儿女 》 及 中 国情 景 喜 别 受众 调查 

您 好 ! 我 是 北京 城市 学 院 航天 城 校区 的 一 名 大 二 的 学 生 沪 员 ,我们 因 传播 学 专业 课 

| 的 需要 正在 进行 《家 有 儿女 》 及 中 国情 景 喜剧 发 展 的 相关 课题 研究 

导语 二 我 们 非常 重要 ( 这 些 意见 将 会 提供 给 业内 专业 人 士 ) ， 您 的 意见 对 于 我 们 的 染 题 有 
很 大 的 帮助 作用 。 对 你 的 信息 我 们 格 严 格 保密 ， 不 会 用 于 研究 以 外 的 任何 用 途 。 


被 调查 者 | :seosa; 
基本 信息 os 
和 .您 的 年 龄 :“ 
ee 
水 您 认为 什么 是 情景 喜 融 呢 ?7“ 
主体 内 容 寺 So 
所 过 电视 馈 丰 二 用 


结语 -| 对 于 作 所 提供 的 协助， 我 们 表示 该 介 的 呈 澳 ! 为 了 保证 资料 的 完整 与 详实 ,请 从 再 花 一 分 名 
翻 一 下 自己 十 过 的 同 着 ， 看 看 是 否 有 填 惜 、 油 十 的 地 方 。 谢 谢 ! 

调查 时 间 调查 地 点 

调查 对 象 调查 人 员 


调查 基本 信息 二 


图 3-5 调查 问卷 的 组 成 部 分 


卷 ” 就 可 以 改 为 “洗车 调查 问卷 ”。 

(2) 导语 。 对 问卷 中 的 一 些 问题 进行 介绍 ,让 作答 者 对 下 面 的 问题 有 心理 准备 ,以 避免 
被 调查 者 对 问题 出 现 理解 不 清 的 状况 。 导 语 的 内 容 主要 包括 调查 者 的 身份 .此 次 问卷 调查 
的 目的 等 。 

(3) 正文 部 分 。 是 问卷 的 主体 。 

(4) 被 调查 者 基本 信息 。 通 常 包 括 性 别 、 年 龄 .职业 等 。 

(5) 结语 。 通 常 要 对 调查 者 表示 感谢 。 

(6) 调查 基本 信息 。 包 括 调研 时 间 ,调查 地 点 .调查 对 象 . 调 查 人 员 等 信息 。 

为 了 节省 设计 调查 问卷 的 时 间 ,本 案例 使 用 * 问 卷 网 的 模板 来 设计 洗车 调查 问卷 ,如 
图 3-6 所 示 , 只 要 在 模板 中 添加 或 删 减 内 容 即 可 。 


3.2.3 在 竞 品 分 析 中 获取 需求 


设计 任何 一 款 产 品 之 前 ,都 要 检验 该 产品 是 否 顺应 潮流 。 只 有 顺应 潮流 的 产品 才能 存 
活 下 来 ,取得 成 功 。 若 想 验证 产品 是 否 顺应 潮流 ,可 以 从 竞 品 分 析 和 人 手 。 本 节 针 对 竞 品 分 析 
进行 讲解 。 

1. 什么 是 竞 品 分 析 


竞 品 是 指 竞争 产品 , 即 竞 争 对 手 的 产品 。 竞 品 分 析 从 本 质 上 说 是 一 种 比较 研究 法 。 简 
单 地 说 , 竞 品 分 析 就 是 先 找 出 竞争 对 手 的 同类 产品 ,再 对 其 进行 比较 和 分 析 。 

对 产品 进行 竞 品 分 析 可 以 随时 了 解 竞 争 对 手 的 产品 和 市 场 动态 ;可 掌握 竞争 对 手 资本 
背景 .市 场 用 户 细 分 群体 的 需求 满足 现状 和 空缺 市 场 ,以 保持 自身 产品 在 市 场 中 的 稳定 性 ， 
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plele le is 
@ 


图 3-6 “问卷 网 ”的 洗车 问卷 调查 模板 


并 且 快 速 提升 市 场 占 有 率 。 下 面 将 针对 竞 品 分 析 的 相关 知识 进行 讲解 。 


2. 竞 品 分 析 目标 
竞 品 分 析 伴随 着 产品 的 诞生 以 及 发 展 壮 大 的 全 过 程 。 竞 品 分 析 用 于 分 析 竞 争 产品 的 战 


略 ,梳理 自身 产品 的 脉络 以 及 寻求 获得 新 切入 点 ,以 明确 和 形成 自身 产品 的 核心 竞争 力 , 最 
终 达 到 占领 市 场 的 目的 。 竞 品 分 析 的 目标 主要 有 以 下 几 方 面 : 


(1) 了 解 竞争 对 手 , 同 时 发 现 潜在 的 竞争 对 手 ,其 目的 是 借鉴 长 处 、 规 避 短 处 。 
(2) 确定 市 场 切入 点 ,验证 以 前 的 方向 是 否 正确 。 
(3) 进一步 认识 用 户 需 求 , 把 握 用 户 需 求 的 功能 点 和 界面 结构 以 及 用 户 的 使 用 习惯 。 


3. 竞 品 分 类 


竞 品 可 以 分 为 3 类 ,分 别 是 直接 竞 品 间接 竞 品 和 潜在 竞 品 ,具体 介绍 如 下 。 
直接 竞 品 指 的 是 市 场 上 和 要 开发 的 产品 有 相同 的 定位 方向 目标 ,产品 功能 .用户 需求 、 客 


户 群体 的 产品 。 对 直接 竞 品 进行 分 析 , 可 以 从 中 借鉴 这 些 产品 的 优点 ,避免 出 现 同 类 产品 的 不 
足 之 处 。 例 如 ,QQ 音乐 . 酷 我 音乐 网易 云 音 乐 就 属于 直接 竞 品 , 如 图 3-7 一 图 3-9 所 示 。 


i 全 和 千 了 并 
于 QQ 音乐 酷 我 音乐 


图 3-7 QQ 音乐 图 3-8 ” 酷 我 音乐 


网 易 云 音乐 


图 3-9 网 易 云 音乐 
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间接 竞 品 指 的 是 各 自 的 着 重 功能 点 不 一 样 ,但 具有 某 些 相似 功能 的 产品 。 间 接 竞 品 会 
降低 要 开发 的 产品 的 使 用 率 。 对 间接 竞 品 进行 分 析 , 可 以 帮助 设计 者 对 要 开发 产品 的 功能 
优先 级 进行 排序 ,并 确定 产品 要 突出 的 功能 。 例 如 , 拼 客 顺 风车 和 滴 滴 出 行 属 于 间接 竞 品 ， 
如 图 3-10 和 图 3-11 所 示 。 


a 
滴 滴 出 行 

JParroke 滴 滴 一 下 美好 出 行 
图 3-10 拼 客 顺风 车 图 3-11 滴 滴 出 行 


潜在 竞 品 指 的 是 竞争 者 在 行业 利润 达到 一 定 规模 时 可 能 进入 市 场 并 利用 其 现 有 资源 对 
竞争 格局 产生 重大 影响 的 产品 。 研 究 这 类 产品 ,有 助 于 预先 提防 它们 的 进入 或 者 提前 避 开 
它们 的 切入 点 。 例 如 , 陌 陌 和 微 信 互 为 潜在 竞 品 。 隔 陌 是 一 款 基于 位 置 服务 的 实时 通信 产 
品 ,如 图 3-12 所 示 ; 微 信和 是 以 熟人 社交 为 基础 的 实时 通信 产品 ,如 图 3-13 所 示 。 虽 然 产品 
目标 不 同 , 但 很 可 能 会 由 潜在 竞 品 向 直接 竞 品 转化 。 


(IMOMO 


图 3-12 陌 陌 图 3-13 微 信 


4. 竞 品 分 析 的 维度 


竞 品 分 析 可 以 从 以 下 几 个 维度 进行 : 战略 层 、 范 围 层 、 结 构 层 、 框 架 层 、 表 现 层 ,如 
图 3-14 所 示 , 这 些 维度 也 是 随 着 产品 开发 阶段 的 演进 而 发 展 的 ,具体 介绍 如 下 。 

(1) 战略 层 : 指 产品 的 目标 、 定 位 以 及 优势 的 对 比 。 

(2) 范围 层 : 指 产品 的 主要 功能 以 及 功能 数据 分 析 ( 各 功能 的 用 户 活跃 数据 ) 。 

(3) 结构 层 : 指 信息 流程 、 页 面 层级 .界面 布局 。 

(4) 框架 层 : 指 交互 设计 , 即 产品 页 面 的 布局 .导航 等 。 

(5) 表现 层 : 指 视觉 设计 ,也 就 是 配色 方案 或 布局 风格 上 给 用 户 带 来 的 感受 。 

注意 : 竞 品 分 析 并 不 是 只 在 某 个 特定 阶段 做 一 次 ,而 是 在 整个 项 目 开发 过 程 的 每 一 个 
阶段 (如 收集 需求 时 、 功 能 优化 时 及 迭代 时 ) 都 要 做 。 

通过 用 户 访 谈 、 调 查 问卷 以 及 竞 品 分 析 ,会 收集 到 一 些 用 户 需求 。 需 要 将 这 些 用 户 需 求 


mii 
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战略 层 范围 层 结构 层 框架 层 表现 层 
。 商 业 需 求 。 。 具 体 功能 。 信 息 架 构 。 。 界 面 设计 。 视 觉 设 计 
。 用 户 需 求 。 。 内 容 需 求 。 交 互 设计 。“。 导 航 设计 


图 3-14 竞 品 分 析 的 维度 


汇总 到 一 张 表格 里 ,将 这 个 表格 称 为 需求 列表 (也 称 需求 池 ) 。 需 求 列 表 模 板 如 表 3-1 所 示 。 
将 用 户 需求 汇总 至 需求 列表 后 ,再 对 列表 中 的 用 户 需 求 进行 分 析 ,进而 得 出 产品 结构 图 ( 相 
关 知 识 详 见 第 4 章 ) 。 

表 3-1 需求 列表 模板 


提交 时 间 | 提交 人 | 面向 对 象 分 类 | 需求 描述 | 需求 来 源 | 功能 描述 | 功能 类 型 | 需求 优先 级 


2017 老 王 用 户 需求 省 心 .省 时 | 用 户 访谈 | 上 门 服务 | 新 增 需求 低 


多 学 一 招 : 构建 用 户 角色 

在 做 用 户 研究 之 前 ,要 先 构 建 用 户 角色 。 用 户 角 色 是 对 产品 目标 群体 真实 特征 的 勾勒 。 
构建 用 户 角色 最 主要 的 目的 就 是 尽 可 能 减少 主观 腾 测 ,理解 用 户 真正 的 需要 ,从 而 确定 产品 
的 定位 及 方向 。 

用 户 角色 一 般 会 包含 一 些 个 人 基本 信息 (如 姓名 .照片 职业、 年 龄 所在地、 性格 .家 庭 
情况 、 爱 好 等 ), 还 包括 对 未 来 计划 、 痛 处、 过 往 经 历 、 当 前 状态 等 的 描述 ,其 至 包括 对 与 产品 
使 用 相关 的 具体 情境 、 用 户 目标 或 产品 使 用 行为 的 描述 等 ,如 图 3-15 所 示 。 一 个 产品 大 概 
需要 3 一 7 种 用 户 角色 。 


是 否 有 房 消费 信用 水 平 
一 入 [本 好 
是 否 有 车 婚 否 ~ 
上 宗教 信仰 
二 
二 \ [项 有 
人 购买 力 ] \ 
En \ 孩子 性 出 
教育 程度 是 否 有 孩子 
1 7 孩子 年 龄 
腰围 E 
\ 家 庭 结构 
健康 状况 > 元 
体型 . 
Li] _ 社会 关系 
身高 | _ | 星 冯 |“ 
饮食 习惯 未 病 更 


图 3-15 用 户 角色 包含 的 描述 信息 
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阶段 案例 : 如 何 编写 竞 品 分 析 报 告 


在 竞 品 分 析 报告 中 要 包含 报告 的 基本 信息 (如 标题 .报告 人 ,报告 日 期 及 版 本 记录 )、 目 
录 以 及 正文 ,如 图 3-16 和 图 3-17 所 示 。 其 中 ,正文 应 根据 目录 编写 。 


洗刷 刷 竞 品 分 析 报 告 


期 | 作者 修订 记录 


图 3-16 洗刷 刷 竞 品 分 析 报告 的 基本 信息 


一 、 项 目 背景 1 
二 、 竞 吕 对象- 2 
1 直接 竞 品 … 2 
2 间接 竞 品 i 站 
3. 潜在 竞 品 ~ 5 
三 、 竞 品 分 析 7 
1 战略 层 7 
2 范围 层 8 
4 框架 层 一 一 ao 
四 、 总 结 15 


图 3-17 洗刷 刷 竞 品 分 析 报告 的 目录 
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3.3 需求 分 析 
在 获取 了 用 户 需 求 后 ,需要 对 这 些 用 户 需 求 进行 分 析 。 需 求 分 析 是 从 用 户 提出 的 需求 
出 发 ,挖掘 用 户 真正 的 需求 并 转化 为 产品 需求 的 过 程 ,如 图 3-18 所 示 。 


需求 分 析 
用 户 需求 


产品 需求 
图 3-18 需求 分 析 
那么 ,如 何 对 用 户 需求 进行 分 析 呢 ? 本 节 将 对 用 户 需求 的 相关 知识 和 需求 的 场景 进行 
讲解 。 
1. 用 户 需求 


了 解 了 什么 是 用 户 的 表面 需求 ,才能 分 析出 用 户 的 本 质 需 求 , 进 而 分 析出 产品 需求 ,如 
图 3-19 所 示 。 下 面 对 用 户 的 表面 需求 .用户 的 本 质 需 求 和 产品 需求 进行 讲解 。 


(an) 本 质 需求 产品 需求 


图 3-19 3 种 需求 的 关系 


用 户 的 表面 需求 是 指 用 户 当 前 想 要 的 。 用 户 经 常 从 自身 角度 出 发 得 出 问题 的 解决 方 
案 , 因 此 用 户 的 大 多 数 建议 并 不 是 某 项 功能 的 最 好 实现 方式 。 如 果 根 据 用 户 的 表面 需求 来 
设计 产品 ,很 可 能 会 出 现 “ 头 痛 医 头 , 脚 痛 医 脚 ” 的 情况 。 

用 户 的 本 质 需求 是 指 用 户 实际 需要 的 , 即 用 户 想 解决 的 根本 问题 。 获 得 用 户 的 本 质 需 
求 , 才 能 找 出 合理 的 方案 来 解决 用 户 的 问题 。 

依据 用 户 的 本 质 需 求 得 出 的 解决 方案 可 以 理解 为 产品 的 一 个 功能 或 一 项 服务 。 产 品 经 
理 首先 需 从 用 户 那里 收集 反馈 信息 ,分 析 用 户 的 表面 需求 ,得 到 用 户 的 本 质 需 求 , 再 根据 用 
户 的 本 质 需 求 进行 产品 功能 规划 。 这 些 待 实现 的 产品 功能 对 于 产品 来 说 就 是 产品 需求 。 


2. 场景 


需求 一 般 是 在 某 个 特定 的 场景 下 才 会 产生 的 ,场景 通常 是 时 间 、 地 点 人物、 环境 和 事件 
的 组 合 。 例 如 ,一 个 成 人 要 理发 ,但 他 并 不 想 出 门 ,这 就 是 一 个 简单 的 场景 。 产 品 经 理 获取 
该 需求 后 ,考虑 是 否 设计 一 款 上 门 理发 的 产品 ,此 时 只 要 考虑 用 户 的 真实 使 用 场景 即 可 。 一 
方面 ,发 型 设计 师 需 要 将 溪 染 工具 全 部 运 到 用 户 家 里 ,发 型 设计 师 费心 、 费 时 、 费 力 ; 男 一 方 
面 , 设 计 完 发 型 后 ,用 户 家 里 又 是 一 片 狼藉 , 且 人 身 安全 得 不 到 保障 。 而 针对 婴 幼 儿 的 特殊 
性 (如 疏 惧 陌生 环境 、 孩 子 太 小 或 天 气 冷 不 能 出 门 ) , 若 提供 一 款 面 向 婴 幼 儿 的 上 门 理发 产 
品 , 就 会 比 面向 成 人 上 门 理发 产品 受 欢迎 。 把 场景 想 清楚 ,需求 就 会 一 目 了 然 ,同样 是 上 门 
理发 ,但 本 质 却 完全 不 同 。 

因此 ,在 分 析 需 求 的 时 候 ,必须 考虑 用 户 的 真实 使 用 场景 ,这 样 才 能 对 用 户 需 求 做 出 精 
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准 的 判断 ,同时 也 能 设计 出 更 完善 的 功能 。 
3.4 需求 梳理 


对 需求 进行 分 析 以 后 ,就 需要 对 这 些 需 求 进行 梳理 。 通 过 对 需求 进行 梳理 ,可 以 更 加 深 
和 人 地 理解 用 户 需 求 以 及 需求 和 产品 之 间 的 关系 ,同时 也 可 以 更 准确 地 评估 产品 的 可 行 性 以 
及 功能 优先 级 。 本 节 将 针对 需求 第 选 和 产品 可 行 性 分 析 进 行 讲解 。 


3.4.1 需求 筛选 


需求 筛选 的 目的 在 于 对 需求 的 优先 级 进行 排序 ,例如 哪些 需求 是 必须 满足 的 ,哪些 需求 
是 可 以 延迟 满足 的 ,而 哪些 需求 又 是 可 以 不 需要 满足 的 。 
需求 筛选 从 以 下 几 方 面 着 手 。 


1. 是 否 满足 用 户 的 本 质 需求 


用 户 提 出 的 需求 往往 是 表面 需求 。 例 如 ,用 户 说 想 要 一 匹 更 快 的 马 ,但 其 本 质 需 求 则 是 
需要 一 个 更 快 的 交通 工具 。 因 此 ,在 设计 产品 时 ,要 给 用 户 一 个 更 快 的 交通 工具 ,而 不 是 一 
匹 更 快 的 马 。 


2. 技术 是 否 能 实现 


产品 实现 时 可 能 会 有 技术 限制 ,如 果 用 户 提出 的 需求 在 技术 上 不 能 实现 ,就 属于 无 效 的 
3. 开发 成 本 是 否 可 控 


如 果 用 户 提 出 的 某 项 需求 所 需要 的 人 力 成 本 、 时 间 成 本 太 高 ,代价 太 大 ,可 能 会 造成 产 
品 不 能 按期 实现 , 则 这 项 需求 可 以 直接 排除 。 


4. 确定 需求 优先 级 


分 析 需 求 优先 级 时 ,常常 用 到 KANO 模型 ,如 图 3-20 所 示 。KANO 模型 是 东京 理工 
大 学 教授 狩 野 纪 昭 (Noriaki Kano) 提 出 的 用 户 需 求 分 类 和 优先 级 排序 工具 ,以 分 析 用 户 需 
求 对 用 户 满 意 度 的 影响 为 基础 ,体现 了 产品 性 能 和 用 户 满意 度 之 间 的 非 线 性 关系 。 根 据 不 
同类 型 的 质量 特性 与 用 户 满意 度 之 间 的 关系 , 狩 野 纪 昭 教 授 将 产品 服务 的 质量 特性 分 为 基 
本 型 需求 .期望 型 需求 .兴奋 型 需求 .无 差异 型 需求 . 反 向 型 需求 5 类 。 

(1) 基本 型 需求 。 也 称 为 必 备 型 需求 、 理 所 当然 需求 ,是 用 户 对 企业 提供 的 产品 或 服务 
因素 的 基本 要 求 ,是 用 户 认为 产品 必须 有 的 属性 或 功能 。 当 其 特性 不 充足 (不 满足 用 户 需 
求 ) 时 ,用 户 很 不 满意 ; 当 其 特性 充足 (满足 用 户 需 求 ) 时 ,用 户 也 可 能 不 会 因而 表现 出 满意 。 
对 于 基本 型 需求 ,即使 超过 了 用 户 的 期 望 ,用 户 充 其 量 只 会 感到 满意 ,不 会 对 此 表现 出 更 多 
的 好 感 ;然而 ,只 要 稍 有 下 忽 ,未 达到 用 户 的 期 望 , 则 用 户 满 意 度 将 一 落 千 丈 。 对 于 用 户 而 
言 , 这 些 需 求 是 必须 满足 的 、 理 所 当然 的 。 例 如 12306 网 站 的 订 票 服务 。 

(2) 期 望 型 需求 。 也 称 为 意愿 型 需求 ,是 指 用 户 的 满意 状况 与 需求 的 满足 程度 成 比例 
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关系 的 需求 。 此 类 需求 得 到 满足 或 表现 良好 的 话 ,用户 满 意 度 会 显著 提高 ,企业 提供 的 产品 
和 服务 水 平 超出 用 户 期 望 越 多 ,用 户 的 满意 度 越 高 ;此 类 需求 得 不 到 满足 或 表现 不 好 的 话 ， 
用 户 的 不 满 也 会 显著 增加 。 例 如 12306 网 站 在 订 票 的 前 提 下 可 以 对 座位 进行 选择 ,就 可 以 
理解 为 期 望 型 需求 , 若 没有 这 个 功能 ,用 户 可 能 会 感到 失望 。 

(3) 兴奋 型 需求 。 是 指 不 会 被 用 户 过 分 期 望 的 需求 。 一 旦 此 类 需求 得 到 满足 ,即使 表 
现 并 不 完善 ,用 户 表现 出 的 满意 度 则 也 是 非常 高 的 ;反之 ,即使 在 期 望 不 满足 时 ,用 户 也 不 会 
表现 出 明显 的 不 满意 。 还 是 以 12306 网 站 为 例 ,用 户 可 以 火车 上 点 外 卖 ,这 可 以 理解 为 兴奋 
性 需求 ,用 户 使 用 这 个 功能 时 会 感到 惊喜 。 

(4) 无 差异 型 需求 。 此 类 需求 不 论 满足 与 否 ,对 用 户 体验 均 无 影响 ,它们 不 会 导致 用 户 
满意 或 不 满意 ,例如 12306 网 站 的 中 铁 e 卡 (手机 卡 ) 业 务 。 

(5) 反 向 型 需求 。 又 称 逆向 型 需求 ,由 于 并 非 所 有 的 用 户 都 有 相似 的 喜好 ,因此 在 提供 
某 些 需求 后 ,一 些 用 户 的 满意 度 反 而 会 下 降 。 例 如 ,一 些 用 户 喜 欢 高 科技 产品 ,而 另 一 些 用 
户 更 喜欢 普通 产品 ,过 多 的 额外 功能 会 引起 后 一 类 用 户 不 满 。 


满意 度 高 
兴奋 型 需求 


期 望 型 需求 


无 差异 型 需求 
需求 已 满足 
基本 型 需求 


需求 未 满足 


满意 度 低 反 向 型 需求 


图 3-20 KANO 模型 


3.4.2 产品 可 行 性 分 析 


产品 可 行 性 分 析 是 对 产品 市 场 需求 .资源 供应 、 建 设 规模 、 环 境 影 响 .资金 筹措 、 型 利 能 
力 等 从 技术 .经济 、 社 会 等 方面 进行 调查 研究 和 分 析 比 较 , 从 而 给 出 产品 的 建设 性 意见 ,为 产 
品 决策 提供 依据 。 

产品 可 行 性 分 析 包 括 技术 可 行 性 分 析 、 经 济 可 行 性 分 析 和 社会 可 行 性 分 析 3 方面 ,如 
图 3-21 所 示 。 


1. 技术 可 行 性 分 析 

在 研究 了 市 场 需求 之 后 ,还 应 该 结合 企业 团队 的 技术 能 力 综合 考虑 ,看 产品 能 否 满足 市 
场 中 的 某 些 需求 ,有 设计 价值 。 

进行 技术 可 行 性 分 析 时 要 考虑 以 下 3 个 问题 : 

(1) 技术 风险 及 规避 方法 。 对 可 能 用 到 的 技术 进行 全 面 分 析 , 评 估 技 术 上 是 否 有 解决 
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不 了 的 问题 ,并 确定 规避 方法 。 
(2) 技术 要 求 。 主 要 分 析 产 品 赖 以 生存 的 关键 技术 的 生命 周期 及 存在 的 蔡 代 技术 。 
(3) 产品 环境 依赖 性 。 产 品 是 否 依赖 于 第 三 方 平台 、 环 境 。 例 如 ,有 的 平台 规定 只 支持 
IE 火狐 .360 浏览 器 ,不 支持 其 他 浏览 器 。 
技术 风险 及 规避 方法 


站 二 二 DO | [产品 环境 依 束 性 
一 | 技术 可 行 性 分 析 ee 


/ 


/ 


产品 可 行 性 分 析 ET 


人 力 成 本 


道德 方面 
~ 社会 可 和 性 分析 ] 


图 3-21 产品 可 行 性 分 析 


2. 经 济 可 行 性 


开发 产品 或 者 进行 投资 时 ,支出 必然 放 在 首位 ,只 有 考虑 了 支出 和 收益 ,才能 够 制订 可 
行 性 计划 。 

关于 支出 要 考虑 以 下 4 点 : 

(1) 人 力 成 本 。 产 品 调研 ,分 析 、 设 计 、 开 发 ,测试 、 运 维 等 需要 多 少 人 力 ,多 长 时 间 , 每 
个 人 月 的 平均 成 本 是 多 少 。 

(2) 运营 成 本 。 产 品 投放 市 场 后 的 推广 ,营销 成 本 和 广告 成 本 等 。 

(3) 软 硬 件 成 本 。 产 品 生产 及 上 线 需 要 购买 的 软件 和 硬件 ,如 数据 库 、 开 发 工具 、 第 三 
方 软件 服务器、 路由器、 网 络 等 成 本 。 

(4) 其 他 支出 。 公 司 运营 的 成 本 ,办公 成 本 、 工 位 成 本 等 。 

关于 收益 要 考虑 以 下 3 点 : 

(1) 直接 收益 。 产 品 的 销售 收益 ,如 OA 产品 , 当 用 户 购买 后 就 会 产生 一 次 收益 。 

(2) 长 期 收益 。 多 长 时 间 能 收回 收益 ,每 个 月 的 收益 率 是 多 少 ,可 能 产生 的 收益 波动 ， 
等 等 。 

(3) 隐 性 价值 。 通 过 产品 的 开发 可 能 带 来 的 其 他 价值 ,如 口碑 、 好 评 \ 行 业 地 位 、 流 
量 等 。 


3. 社会 可 行 性 
一 个 好 的 产品 除了 要 符合 法 律 和 道德 外 ,应 该 恰好 出 现在 市 场 需要 它 的 时 候 。 如 果 商 
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机 把 握 不 准 , 必 然 造成 人 力 、 财 力 的 损失 ,不 会 给 企业 带 来 任何 利益 。 

进行 社会 可 行 性 分 析 时 ,要 考虑 法 律 .道德 和 社会 影响 力 3 个 方面 。 

(1) 法 律 方面 。 产 品 不 能 触犯 法 律 ,否则 产品 不 会 走 远 , 如 赌博 类 产品 等 。 

(2) 道德 方面 。 产 品 要 和 否 符合 道德 标准 及 大 众 审美 ,否则 就 不 会 被 大 众 所 接 受 , 如 传播 
社会 负 能 量 的 产品 等 。 

(3) 社会 影响 力 方面 。 产 品 要 解决 社会 存在 的 某 类 问题 ,并 能 带 来 社会 价值 。 通 过 产 
品 的 推广 ,产品 将 会 给 公司 带 来 社会 效益 ,增强 社会 影响 力 。 


3.5 商业 需求 文档 


对 需求 进行 分 析 和 梳理 之 后 ,就 要 进行 撰写 商业 需求 文档 了 。 商 业 需 求 文档 是 在 立项 
之 前 产品 经 理 所 要 产 出 的 产物 。 那 么 ,什么 是 商业 需求 文档 ? 商业 需求 文档 是 写 给 谁 的 ? 
商业 需求 文档 是 用 来 做 什么 的 ? 它 又 包含 什么 内 容 呢 ?本 节 将 对 商业 需求 文档 的 相关 知识 
进行 讲解 。 


3.5.1 商业 需求 文档 概述 


商业 需求 文档 简称 BRD(Business Requirement Document) , 指 的 是 基于 商业 目标 或 价 
值 描述 产品 需求 的 文档 。BRD 是 产品 生命 周期 中 最 早产 出 的 文档 ,通常 是 供 决策 层 讨 论 的 
演示 文档 ,一 般 比 较 短小 精 悍 ,没有 产品 细节 。 


3.5.2 商业 需求 文档 的 汇报 对 象 


对 不 同 的 企业 ,BRD 的 决策 层 不 同 。 产 品 经 理 在 日 常 产品 管理 过 程 中 ,通过 一 系列 的 
市 场 分 析 或 调查 ,掌握 了 一 个 潜在 的 \ 未 被 满足 的 大 量 用 户 需 求 ,而 这 些 需求 背后 映射 了 一 
个 广阔 的 市 场 空间 。 产 品 经 理 在 撰写 BRD 后 ,将 向 下 面 几 种 类 型 的 决策 者 汇报 : 

(1) 资本 型 决策 者 。 以 CFO( 首 席 财务 官 )、 财 务 总 监 等 为 主 。 因 为 对 财务 来 说 ,最 好 的 
方式 就 是 只 有 利润 没有 成 本 。 在 BRD 中 ,要 专门 针对 这 一 方面 做 一 份 详细 的 报告 。 通 常 而 
言 ,做 一 个 互联 网 项 目 ,主要 的 投入 在 于 人 力 成 本 .运营 或 营销 成 本 .时 间 成 本 、 软 硬件 成 本 
和 环境 成 本 。 如 果 只 给 出 成 本 计划 ,财务 型 决策 者 肯定 不 会 马上 同意 ,一 定 要 明确 给 出 收益 
预测 。 而 有 时 候 项 目 关注 的 不 是 短期 效益 ,更 多 的 项 目 在 初期 通常 不 大 可 能 获得 较 高 效益 ， 
这 就 需要 在 报告 中 体现 出 长 远 的 效益 预测 。 

(2) 市 场 型 决策 者 。 以 市 场 总 监 . 运 营 总 监 等 为 主 。 市场 型 决策 者 最 关注 以 下 几 个 
方面 : 

。 有 没有 成 熟 的 推广 渠道 。 有 成 熟 的 推广 渠道 ,营销 工作 就 容易 开展 ;如 果 没 有 ,项 目 

难度 就 会 大 增 , 甚 至 有 可 能 根本 无 法 落实 。 

。 有 没有 竞争 对 手 , 外 部 环境 如 何 。 外 部 环境 通常 指 行业 环境 ,市场 环 境 和 政策 环境 。 

越 成 熟 的 市 场 环 境 , 对 新 兴 项 目 越 不 利 ;而 越 紧缩 的 政策 环境 ,也 对 项 目 越 不 利 。 

。 有 没有 营销 资源 .市 场 占有 情况 如 何 。 市 场 占 有 情况 就 是 要 看 产品 有 多 大 的 市 场 

份额 。 

。 市场 空间 有 多 大 。 市 场 空间 和 市 场 占有 情况 相似 。 
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(3) 研发 型 决策 者 。 也 叫 技 术 支 持 型 决策 者 ,以 首席 技术 官 为 主 。 大 多 数 产品 经 理 并 
不 具备 很 强 的 技术 研发 功底 。 在 BRD 中 ,研发 部 分 可 尽量 简化 表达 ,目的 只 有 一 个 ,让 研发 
型 决策 者 充分 理解 该 项 目的 主要 功能 模块 是 什么 类 型 即 可 。 

(4) 战略 型 决策 者 。 主 要 是 董事 长 .CEO( 首 席 执 行 官 )\COO( 首 席 运 营 官 ) 或 直属 副 总 
裁 。 公 司 的 VP 或 COO 通常 不 特别 注重 短期 效益 ,也 不 仅 关 注 单一 的 经 济 效益 ,还 关注 是 
否 是 潜在 市 场 或 新 兴 市 场 ,是 否 有 长 期 投资 的 价值 ,未 来 的 趋势 是 否 很 好 ,风险 是 什么 ， 
等 等 。 


3.5.3 商业 需求 文档 的 用 途 


要 确定 商业 需求 文档 的 内 容 ,就 要 先 理解 商业 文档 的 用 途 。 商 业 需 求 文档 应 该 回答 以 
下 问题 ， 

(1) 是 什么 。 即 做 的 什么 产品 ,解决 了 用 户 的 哪些 诉求 。 

(2) 为 什么 。 提 出 商业 背景 . 竞 品 分 析 、 市 场 机 会 。 

(3) 如 何 做 。 对 产品 进行 规划 。 

(4) 需要 什么 资源 。 

(5) 能 得 到 什么 。 列 举 商 业 收 益 , 如 用 户 .资金 .流量 等 。 

(6) 投入 产 出 比 。 列 举目 前 的 风险 .能力 与 资源 。 

综 上 所 述 ,商业 需求 文档 核心 的 用 途 就 是 在 产品 投入 研发 之 前 ,作为 企业 高 层 决策 评估 
的 重要 依据 。 因 此 商业 需求 文档 的 内 容 和 格式 要 求 直观 、 精 炼 . 要 点 突出 ,必须 让 高 层 明 白 
产品 将 展现 出 怎样 的 商业 价值 ,用 有 力 的 论据 来 说 服 企业 高 层 认 可 这 个 项 目 , 并 为 之 投入 研 
发 资源 及 市 场 费 用 。 


3.5.4 商业 需求 文档 的 内 容 


商业 需求 文档 中 通常 包含 基本 信息 (如 文档 状态 、 当 前 版 本 、 作 者 等 ,如 图 3-22 所 示 ) 和 
内 容 信息 。 为 了 方便 查看 ,通常 会 生成 一 个 目录 , 且 以 PPT 的 方式 呈现 ,如 图 3-23 所 示 。 


文档 状态 ， 
[V] 草稿 
[ ] 正式 发 布 
[ ] 正在 修改 完成 日 期 ， | 2010-01 | 


图 3-22 商业 需求 文档 基本 信息 


i 项 目 背景 


2 项 目 规划 


3 收益 、 成 本 和 风险 
图 3-23 ”商业 需求 文档 目录 
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阶段 案例 : 如 何 撰写 商业 需求 文档 


本 案例 利用 Word 制作 一 个 商业 需求 文档 的 模板 。 图 3-24 和 图 3-25 为 商业 需求 文档 
的 基本 信息 和 目录 。 按 照 目录 填充 内 容 之 后 即 成 为 完整 的 商业 需求 文档 。 


洗刷 刷 商业 需求 文档 
文档 状态 : 当前 版 本 
() 草稿 作者 
( 〇 已 完成 日 期 
() 正在 修改 备注 
版 本 记录 
版 本 | 作者 | 参与 者 | 起 止 日 其 备注 


图 3-24 商业 需求 文档 基本 信息 


3. 项 目 风险 与 对 策 


图 3-25 ”商业 需求 文档 目录 


1. 项 目 背 景 


在 项 目 背景 部 分 应 说 明 以 下 问题 : 
(1) 行业 现状 。 说 明 项 目 提案 的 原因 ,概述 本 行业 的 现状 及 问题 。 
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(2) 用 户 需求 。 列 出 用 户 需 求 以 及 如 何 满足 这 些 用 户 需 求 ,说 明 这 些 用 户 的 特征 是 什 
么 ,以 及 满足 了 用 户 需求 会 有 什么 样 的 客户 价值 。 

(3) 行业 市 场 规模 。 阐 述 国内 外 本 行业 的 市 场 状况 ,如 市 场 规模 ,发 展 趋势 .环境 变 
化 等 。 

(4) 行业 盘 利 模式 。 简 要 叙述 本 行业 的 产品 依靠 什么 手段 盘 利 。 

(5) 竞争 格局 。 简 要 说 明 市 场 上 是 否 有 同类 或 相似 的 竞争 对 手 。 若 有 ,那么 这 些 竞争 
对 手 的 优势 和 市 场 占有 状况 如 何 。 


2. 核心 需求 


本 部 分 要 阐述 产品 的 核心 需求 。 产 品 的 核心 需求 是 指 用 户 真 正 要 获得 的 利益 , 即 产品 
的 使 用 价值 。 


3. 收益 成 本 和 风险 


在 本 部 分 要 说 明 以 下 问题 : 

(1) 项 目 收益 预 估 。 益 述 项 目 可 以 带 来 的 收益 。 

(2) 项 目 成 本 估算 。 简 要 说 明 项 目 实施 所 需要 的 人 力 和 财力 ,汇总 为 项 目 成 本 估算 表 ， 

如 表 3-2 所 示 。 
表 3-2 项 目 成 本 估算 表 

职能 岗位 人 数 费 用 
研发 
设计 
运营 
市 场 
其 他 费用 
总 费用 


(3) 项 目 风 险 与 对 策 。 闸 述 项 目的 内 部 风险 和 外 部 风险 以 及 应 对 的 策略 。 


3.6 市 场 需求 文档 


3.6.1 市 场 需求 文档 概述 


市 场 需求 文档 ,简称 MRD(Market Requirement Document) ,该 文档 在 产品 项 目 过 程 中 
属于 过 程 性 文档 ,由 产品 经 理 或 者 市 场 经 理 编写 。 


3.6.2 市 场 需求 文档 的 作用 


市 场 需求 文档 是 产品 项 目 由 准备 阶段 进入 实施 阶段 的 第 一 个 文档 , 它 在 产品 项 目 中 起 
承上启下 的 作用 ,向 上 是 对 不 断 积累 的 市 场 数据 的 一 种 整合 和 记录 ,向 下 是 对 后 续 工 作 的 方 
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向 说 明和 工作 指导 。 这 个 文档 的 质量 直接 影响 到 产品 项 目的 开展 ,并 直接 影响 到 公司 产品 
战略 的 实现 。 


3.6.3 常用 的 两 大 产品 分 析 法 


撰写 市 场 需求 文档 时 往往 需要 对 产品 进行 分 析 。 对 产品 进行 分 析 。 最 常用 的 方法 有 两 
种 ,分 别 是 SWOT 分析 法 和 PEST 分 析 法 ,具体 讲解 如 下 。 


1. SWOT 分 析 法 


SWOT 分 析 法 就 是 将 与 研究 对 象 密切 相关 的 内 部 的 优势 .劣势 和 外 部 的 机 会 、 威 
胁 等 通过 调查 列举 出 来 并 加 以 分 析 。 运 用 这 种 方法 ,可 以 对 研究 对 象 所 处 的 情景 进行 
全 面 、 系 统 、 准 确 的 研究 ,从 而 根据 研究 结果 制订 相应 的 发 展 战略 .计划 以 及 对 策 等 。 
SWOT 分 析 法 常常 用 于 制定 集团 发 展 战略 和 竞 品 分 析 , 是 最 常用 的 方法 之 一 ,具体 解 
释 如 下 。 

(1) SCStrength) 是 优势 ,是 企业 的 内 部 因素 ,具体 包括 有 利 的 竞争 态势 .充足 的 财政 来 
源 、 良 好 的 企业 形象 .技术 力量 .规模 经 济 .产品 质量 、 市 场 份额 .成 本 优势 .广告 攻势 等 。 

(2) W(Weakness) 是 劣势 ,也 是 企业 的 内 部 因素 ,具体 包括 设备 老化 ,管理 混乱 ,缺少 关 
键 技术 、 研 究 开发 落后 ,资金 短缺 .经营 不 善 .产品 积压 .竞争 力 差 等 。 

(3) O(Oppotunity) 是 机 会 ,是 企业 的 外 部 因素 ,具体 包括 新 产品 .新 市 场 . 新 需求 ,外国 
市 场 壁垒 解除 .竞争 对 手 失误 等 。 

(4) TCThreat) 是 威胁 ,也 是 企业 的 外 部 因素 ,具体 包括 新 的 竞争 对 手 、 替 代 产 品 增多 、 
市 场 紧 缩 ,行业 政策 变化 、 经 济 衰退、 客户 偏好 改变 、 突 发 事件 等 。 

按照 企业 竞争 战略 的 完整 概念 ,战略 应 是 一 个 企业 能 够 做 的 (基于 内 部 的 优势 和 劣势 ) 
和 可 能 做 的 (基于 外 部 的 机 会 和 威胁 ) 的 有 机 组 合 ,如 图 3-26 所 示 , 若 遇 到 WT( 威 胁 和 劣 
势 ) 组 合 , 则 应 换个 方向 考虑 产品 。 


S (优势 ) W (劣势 ) 

SO WO 
9 优势 、 机 会 组 合 劣势 、 机 会 组 合 
机 战略 : 战略 : 
> 最 大 限度 地 发 展 利用 机 会 ， 回 避 

劣势 

ST WT 
工 优势 、 威 胁 组 合 劣势 、 威 胁 组 合 
威 
胁 


战略 : 战略 : 
利用 优势 ， 降低 ”收缩 、 合并 
威胁 

图 3-26 SWOT 分 析 法 


2. PEST 分 析 法 
PEST 分 析 是 指 宏观 环境 的 分 析 。 宏 观 环境 又 称 一 般 环境 ,是 指 影响 一 切 行业 和 企 
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业 的 各 种 宏观 力量 。 主 要 通过 政治 (Politics)、 经 济 (Economy)、 社 会 (Society)、 技 术 
(Technology)4 个 方面 把 握 宏观 环境 ,因此 称 这 种 方法 为 PEST 分 析 法 。 公 司 战略 的 制订 
离 不 开 宏观 环境 ,而 PEST 分 析 法 能 从 各 个 方面 较 好 地 把 握 宏 观 环境 的 现状 及 变化 的 趋 
势 , 有 利于 企业 对 生存 发 展 的 机 会 加 以 利用 ,对 宏观 环境 可 能 带 来 的 威胁 及 早 发 现 和 
避 开 。 

下 面 分 别 对 政治 环境 .经济 环境、 社会 环境 和 技术 环境 进行 讲解 。 

(1) 政治 环境 。 指 一 个 国家 或 地 区 的 政治 制度 ,体制 .方针 政策 ,法律 法 规 等 因素 。 这 
些 因素 常常 影响 企业 的 经 营 行为 ,尤其 是 对 企业 长 期 的 投资 行为 有 较 大 影响 。 

(2) 社会 环境 。 主 要 指 企业 所 在 社会 中 成 员 的 民族 特征 文化 传统 、 价 值 观念 .宗教 信 
仰 教育 水 平 以 及 风俗 习惯 等 因素 。 

(3) 技术 环境 。 指 企业 业务 所 涉及 的 技术 水 平 .技术 政策 、 新 产品 开发 能 力 以 及 技术 发 
展 的 动态 等 。 

(4) 经 济 环境 。 指 企业 在 制定 战略 过 程 中 必须 考虑 的 国内 外 经 济 条件 、 宏 观 经 济 政策 、 
经 济 发 展 水 平等 因素 。 


阶段 案例 : 如 何 撰 写 市 场 需求 文档 


上 蝶 


市 场 需求 文档 和 商业 需求 文档 一 样 ,主要 包含 文档 的 基本 信息 和 内 容 信 息 。 文 档 的 基 
本 信息 如 图 3-27 所 示 。 内 容 信息 一 般 分 为 六 个 方面 ,如 图 3-28 所 示 。 


市 场 需求 文档 


图 3-27 市 场 需求 文档 基本 信息 
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图 3-28 市 场 需求 文档 目录 


1. 背景 


本 部 分 描述 项 目的 背景 ,一 般 通 过 对 本 行业 进行 调研 取得 社会 环境 、 技 术 环 境 等 信息 。 
例如 下 面 是 某 健 康 医疗 项 目的 社会 环境 。 


“健康 中 国 " 上 升 为 国家 战略 ,被 列 入 “十 三 五 ”重点 规划 。 而 预防 胜 于 治疗 ,也 是 医疗 
行业 的 共识 。 由 于 国家 的 大 力 推广 ,以 及 人 们 对 健康 的 重视 程度 逐步 提高 ,健康 管理 机 构 
如 雨后春笋 般 , 由 2008 年 的 300 家 迅速 增加 到 2017 年 的 7000 家 。 这 些 健 康 管理 机 构 又 
迫切 需要 大 量 高 质量 信息 化 系统 的 支持 。 

中 国 大 健康 产业 整体 规模 是 8 万 亿 元 ,参照 美国 大 健康 产业 的 市 场 细 分 比例 ,中 国 健 
康 管 理 市 场 规模 达 8800 亿 元 。 健 康 管理 机 构 的 信息 化 投入 约 占 28%, 即 2500 亿 。 


2. 文档 介绍 


本 部 分 包括 以 下 两 个 方面 : 


(1) 文档 目的 。 简 述 该 文档 的 目的 是 什么 , 想 表达 什么 。 例 如 ,下 面 是 某 健康 医疗 项 目 
市 场 需求 文档 的 目的 。 


本 文档 用 于 说 明 健康 管理 市 场 的 现状 ,趋势 .问题 和 壁垒 ,同时 对 健康 管理 市 场 的 目 
标 用 户 群 体 及 竞 品 进行 分 析 , 研 究 公司 是 否 要 进入 此 市 场 以 及 如 何 切 入 此 市 场 ,确定 产品 
目标 和 核心 功能 ,并 完成 产品 路 线 和 产品 结构 规划 。 


(2) 内 容 概要 。 简 明 扼要 地 写 出 文档 的 内 容 。 例 如 , 某 健康 医疗 项 目 市 场 需求 文档 的 
内 容 概要 如 下 : 
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本 文档 包括 市 场 分 析 、 用 户 分 析 、 竞 品 分 析 和 产品 分 析 四 大 部 分 。 


3. 市 场 分 析 


本 部 分 应 说 明 以 下 几 个 问题 ， 

(1) 目标 市 场 。 简 要 说 明 项 目的 目标 市 场 。 例 如 , 某 健 康 医疗 项 目的 目标 市 场 为 “健康 
管理 系统 ”。 

(2) 市 场 定位 。 描 述 项 目的 市 场 定 位 。 例 如 , 某 健康 医疗 项 目的 市 场 定 位 为 “为 健康 管 
理 机 构 提供 全 面 .实用 的 健康 管理 系统 ”。 

(3) 目标 市 场 现状 。 通 过 对 目标 市 场 的 调研 ,得 出 目标 市 场 的 现状 。 例 如 某 健康 医疗 
的 目标 市 场 现状 如 下 : 


健康 数据 现在 越 来 越 重要 。 健 康 数 据 是 形成 健康 档案 的 基础 ,是 平台 进行 个 性 化 推 
荐 的 分 析 原 料 。 健 康 数 据 包 含 用 户 的 体检 报告 数据 、 健 康 评测 数据 、 运 动 数 据 、 饮 食 数 据 、 
体征 数据 。 现 阶段 对 平台 来 讲 较 为 真实 、 有 效 的 数据 为 体检 报告 数据 和 体征 数据 。 体 检 
报告 数据 最 为 重要 ,也 最 为 真实 ` 可 靠 , 但 是 需要 平台 与 医院 体检 系统 深度 对 接 才 能 获得 。 
另外 ,用 户 自行 通过 健康 设备 (血压 检测 仪 、 血 糖 检测 仪 、 尿 常规 检测 仪 等 ) 上 传 的 体征 数 
据 也 比较 可 靠 。 平 台 不 能 单纯 地 展示 这 些 数据 ,这 样 对 用 户 毫 无 吸引 力 。 多 数 平台 会 对 
这 些 数 据 进 行 一 些 统计 分 析 , 分 析 的 维度 有 历次 数据 的 对 比 及 趋势 预测 ,平均 值 . 极 值 、 疾 
病 风险 ,健康 建议 等 。 


(4) 市 场 趋势 。 根 据 PEST 分 析 法 分 析 市 场 趋 势 。 例 如 ,以 下 是 某 健 康 医 疗 项 目的 市 
场 趋 势 分 析 : 


P( 政 策 因素 ): 分 级 诊疗 制度 逐渐 推进 。2016 年 3 月 ,《 国务院 办 公 厅 关于 促进 医药 
健康 发 展 的 指导 意见 》 明 确 规定 : 四 推动 医生 多 点 执业 ; 四 提升 基层 医疗 机 构 的 服务 能 
力 ; 回 加 快 落实 分 级 诊疗 。2016 年 12 月 ,《 关 于 发 挥 医保 调节 作用 推进 本 市 分 级 诊疗 制 
度 建设 有 关 问题 的 通知 ) 规 定 6 项 新 增 措施 以 推进 分 级 诊疗 制度 。 

E( 经 济 因 素 ): 互联 网 创业 投资 遇 冷 ,市场 趋 于 理性 。2016 年 ,新 增 创 业 公司 数量 同 
比 减少 了 77%, 大 幅 跳 水 。 创 业 公司 获 投 数 量 同 比 减少 26%, 疯 狂 投 资 阶段 已 过 ,市 场 赵 
于 理性 ,投资 者 更 为 谨慎 。 给 用 户 带 来 的 价值 和 各 利 点 成 为 投资 者 的 重点 关注 指标 。 

S( 社 会 因素 ): 医疗 资源 总 量 不 足 。 截 至 2015 年 ,全 国 的 医生 总 数 为 300 多 万 人 ,每 
千 人 口 执业 医师 仅 有 2.21 人 ,而 人 群 就 诊 次 数 为 5 一 6 次 。 中 国 在 卫生 总 费用 超过 4 万 
亿 元 , 占 GDP 的 6%, 虽 然 比 2010 年 的 4.9 吧 有 所 提升 ,但 仍 只 占 很 小 比例 。 

T( 技 术 因 素 ): 大 数据 技术 和 AI 释放 了 医生 的 一 部 分 精力 。 医 疗 领域 的 第 三 方 服 
务 积极 探索 和 推进 大 数据 技术 的 应 用 ,并 通过 AI 部 分 代替 医生 对 基础 、 常 见 病 历 的 识 
别 、 分 析 和 决策 。 


(5) 市 场 问 题 . 机 会 .壁垒 。 根 据 SWOT 分 析 法 对 市 场 进行 分 析 , 进 而 得 出 结论 。 例 
如 , 某 健康 医疗 项 目的 问题 ` 机 会 及 壁垒 如 下 : 
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内 部 环境 | 优势 (S) 劣势 (W) 
完整 的 技术 支持 缺少 成 熟 的 案例 
大 数据 与 AI 的 完美 结合 与 业务 机 构 脱 节 
外 部 环境 成 熟 的 健康 管理 知识 库 
机 会 (0) SO 战略 WO 战略 
国家 鼓励 医疗 健康 行业 的 发 展 ，| 充分 利用 技术 等 优势 ,响应 国家 | 加 深 对 健康 管理 系统 业务 的 了 解 
大 量 相关 的 扶持 政策 相继 出 台 。 | 号 召 , 迅 速 占领 部 分 市 场 提高 健康 管理 系统 业务 推广 能 力 
人 们 健康 意识 逐步 提高 
威胁 (T) ST 战略 WT 战略 
传统 医疗 公司 逐渐 投入 健康 管 | 以 技术 优势 弥补 业务 逻辑 上 的 | 通过 差异 化 来 避免 与 传统 医疗 
理 行业 不 足 公司 
大 批 创业 者 加 入 健康 管理 行业 ，| 通过 AI 和 大 数据 技术 完善 健康 | 通过 完善 公司 股权 制度 来 鼓励 更 
加 剧 了 竞争 管理 知识 库 多 的 人 才 加 入 
4. 用 户 分 析 
本 部 分 要 说 明 以 下 几 个 问题 : 


(1) 目标 用 户 。 简 要 描述 项 目的 目标 用 户 。 例 如 , 某 健康 医疗 项 目的 目标 用 户 如 下 : 


。 有 一 定 专 业 知 识 的 医师 群体 。 
。 对 身体 状态 较为 关心 的 中 年 群体 。 
。 有 慢性 病 的 中 老年 群体 。 


(2) 目标 用 户 群 体 和 特征 。 简 述 目 标 用 户 群 体 及 其 特征 。 例 如 , 某 健 康 医疗 项 目的 目 


标 用 户 群 体 及 其 特征 如 下 : 


。 健康 管理 师 群 体 : 具有 专业 的 健康 保健 知识 ,熟悉 医疗 信息 化 ,会 使 用 信息 系统 。 
。 患者 群体 : 一 般 以 中 年 人 为 主 ,对 自身 的 身体 状况 比较 在 意 。 还 有 部 分 老年 人 ， 
由 子女 帮忙 预约 ,定期 做 全 面体 检 。 


(3) 用 户 角色 。 
色 


疗 项 目的 用 户 角 色 如 下 : 


角色 一 
姓名 : 陈 烨 

性 别 : 女 

年 龄 : 35 岁 

状态 : 健康 管理 师 。 
特点 : 


角色 二 
姓名 : 宋 沌 


专注 健康 体检 10 年 ,有 丰富 的 健康 管理 经 验 。 


列 出 几 个 虚拟 的 用 户 角色 ,使 文档 变 得 更 加 有 理 有 据 。 例 如 , 某 健康 医 
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(4) 使 用 场景 。 简 要 描述 用 户 的 真实 使 用 场景 。 例 如 , 某 健康 医疗 项 目的 使 用 场景 
如 下 : 


(5) 用 户 需求 。 描 述 用 户 需求 。 例 如 ,下 面 是 某 健康 医疗 项 目的 用 户 需求 : 


5. 竞 品 分 析 


本 部 分 要 说 明 以 下 两 个 问题 : 
(1) 市 场 及 战略 分 析 。 选 取 几 个 竞 品 ,从 市 场 及 战略 的 维度 分 析 竞 品 。 例 如 ,下 面 是 某 
健康 医疗 项 目的 市 场 及 战略 分 析 : 


互联 网 产品 设计 思维 与 实践 


(2) 用 户 分 析 。 描 述 竞 品 的 目标 用 户 定位 。 例 如 , 某 健康 医疗 项 目的 竞 品 的 用 户 定位 
如 下 : 


6. 产品 分 析 


本 部 分 主要 描述 产品 定位 、 产 品 核 心目 标 及 产品 结构 。 例 如 , 某 健康 医疗 项 目的 产品 分 
析 如 下 : 
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学 习 目 标 

。 了解 产品 结构 图 。 

。 掌握 产品 结构 图 的 绘制 方法 。 

。 了 解 产 品 流程 图 。 

。 熟悉 产 品 流程 图 的 元 素 定义 。 

。 掌握 产品 流程 图 的 绘制 方法 。 

前 面 几 章 介 绍 了 互联 网 产品 的 基本 概念 以 及 产品 的 构想 和 需求 分 析 , 从 本 章 开始 进入 
产品 规划 阶段 。 产 品 经 理 要 根据 前 期 的 调研 分 析 对 产品 进行 规划 ,需要 更 加 具体 地 描绘 出 
产品 的 基本 功能 架构 以 及 产品 的 基本 流程 。 在 产品 规划 阶段 ,产品 经 理 需 要 产 出 产品 结构 
图 和 产品 流程 图 ,但 是 对 于 该 如 何 绘制 产品 结构 图 和 产品 流程 图 ,产品 设计 新 手 却 并 不 了 
解 。 本 章 将 带领 大 家 了 解 产 品 结构 图 .产品 流程 图 以 及 它们 的 绘制 方法 。 


4.1 产品 结构 图 


在 进行 产品 结构 规划 时 ,产品 经 理会 获取 很 多 信息 ,如 用 户 需求 信息 、 市 场 调研 信息 等 。 
品 经 理 要 对 这 些 信 息 进行 整理 和 归纳 ,确定 产品 的 功能 和 特性 ,绘制 产品 结构 图 。 本 节 针 
对 结构 图 及 其 绘制 方法 进行 讲解 。 


4.1.1 产品 结构 图 简介 


品 结构 规划 的 结果 是 3 种 产品 结构 图 , 即 产品 功能 结构 图 .产品 信息 结构 图 和 产品 结 
构图 ,为 了 区 分 这 3 种 结构 图 ,下 面 分 别 进行 讲解 。 


1. 产品 功能 结构 图 


产品 功能 结构 图 ,简单 地 讲 ,就 是 用 结构 化 的 形式 界定 产品 有 什么 功能 ,可 以 用 来 做 什 
么 。 图 4-1 即 是 iPhone 手机 图 库 的 功能 结构 图 。 产 品 功能 结构 图 能 够 帮助 产品 经 理 思考 
并 确定 产品 的 功能 模块 及 其 功能 组 成 ,还 能 够 帮助 产品 经 理 梳 理 需 求 ,以 鸟 若 的 方式 对 产品 
的 功能 结构 形成 一 个 直观 的 认识 ,防止 在 将 产品 需求 转化 为 功能 需求 的 过 程 中 出 现 功 能 模 
块 和 功能 点 缺失 的 现象 。 

从 图 4-1 可 以 看 出 ,每 个 功能 都 是 以 * 动 词 十 名词” 的 形式 命名 的 ,如 * 选 择 照 片 /视频 ” 
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分 享 照片 /视频 


a 测 呈 | 相 汪 
选择 照片 /视频 | 加 一 肌 际 照 片 /视频 


裁 蚤 照片 


编辑 视频 稻 辑 视频 


分 享 视频 
查看 视频 | 一 

查看 “为 你 推荐 ” 

庆生 和 本 |。 站 


\ 


| 搜索 照片 /视频 


图 4-1 iPhone 手机 图 库 的 功能 结构 图 


“查看 照片 “编辑 照片 "等 。 这 种 表达 方式 使 信 
息 传达 更 加 准确 ,可 以 避免 读者 产生 不 必要 的 
困惑 。 


城市 

- 玫 拍摄 的 地 点 |e 节 区 
拍摄 的 日 期 

照片 /视频 的 展示 图 片 


2. 产品 信息 结构 图 


产品 信息 结构 图 是 指 脱离 产品 的 实际 界面 ， 
将 产品 的 信息 梳理 出 来 ,组 成 结构 图 。 例 如 个 人 
中 心 一 般 包 括 头像 .基本 信息 、 设 置 等 。 图 4-2 为 
iPhone 手机 图 库 的 信息 结构 图 。 产 品 信息 结构 


图 的 绘制 通常 晚 于 产品 功能 结构 图 ,往往 是 在 产 
品 设计 阶段 的 概念 化 过 程 中 ,在 产品 功能 框架 已 、 
确定 ,功能 结构 已 完善 好 的 情况 下 , 才 对 产品 信 人 
息 结构 进行 分 析 和 设计 。 产 品 信息 结构 图 的 作 本 
选择 /取消 按钮 
用 是 辅助 产品 功能 设计 ,辅助 建立 数据 库 表 。 
3. 产品 结构 图 2 
底部 导航 |e| 相 
品 结构 图 就 是 将 产品 的 原型 以 结构 化 的 医 二 到 


方式 展示 出 来 , 它 综 合 了 产品 功能 结构 图 和 信息 。 图 4-2 iPhone 手机 图 库 的 信息 结构 图 
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结构 图 ,iPhone 手机 图 库 的 结构 图 如 图 4-3 所 示 。 产 品 结构 图 在 前 期 的 需求 评审 中 可 以 作 
为 产品 原型 的 替代 ,因为 产品 结构 图 相对 于 产品 原型 图 来 说 实现 成 本 较 低 ,并 且 能 够 对 产品 
功能 结构 进行 快速 更 改 。 


回忆 照片 日 期 


一 | 为 你 推荐 |s[ 畏 妇 片 日 其 


近年 份 搜索 
\ 搜索 照 
搜索 照片 | 村 闪 型 (图片 视频) 要 
要 索 和 


图 4-3 iPhone 手机 图 库 结 构图 


4.1.2 ”产品 结构 图 制作 软件 一 一 XMind 


XMind 是 绘制 产品 结构 图 的 常用 工具 之 一 ,熟练 掌握 XMind 的 操作 已 成 为 产品 经 理 
的 必 备 技能 。 下 面 将 详细 讲解 XMind 的 使 用 方法 。 


1. 新 建文 件 
打开 XMind 软件 , 单 击 图 4-4 中 的 “思维 导 图 ” 即 可 创建 产品 结构 图 。 
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和 = 上 
所 i | IM? ! 
0 | | ] [ 
2 
= EE PM WT Fa ep PEE ET 
© ] 人 | 3 3 
二 en -一 一 一 
em [ [en ce = = 
画 - 上 = —y 
il a 史上 ) MN 机 Mi 本 庙 左 ， i Et 于 入 图 而 在? 
| 
| >、 一 | 
[ ;> | 王 - | 天 
TF EN 生生 同 名 和 有 有 ) 季风 忌 有 三) WEN 们 ) 
| 
[sl 
部 
新 入 二 


图 4-4 创建 产品 结构 图 


注意 : 若 XMind 软件 已 打开 ,可 以 执行 “文件 ”>“ 新 建 " 命 令 创 建 当前 类 型 的 产品 结构 
图 ,也 可 以 执行 “文件 ”>“ 新 建 空白 图 ”命令 ,创建 图 4-4 所 示 的 其 他 类 型 的 产品 结构 图 。 


2. 添加 主题 


(1) 插入 分 支 主题 和 子 主题 。 中 心 主题 是 默认 自 带 的 , 若 想 插入 分 支 主 题 和 子 主题 , 执 
行 “ 插 入 ”一 “ 子 主题 "命令 (或 按 Tab 键 ) 可 以 快速 添加 分 支 主题 和 子 主题 ,如 图 4-5 所 示 。 
双击 分 支 主 题 或 子 主题 即 可 更 改 主题 名 称 。 


双击 输入 主题 名 称 


图 4-5 添加 分 支 主 题 和 子 主题 


分 支 上 题 1 le 


(2) 插入 同 级 主题 。 
选中 分 支 主题 ,执行 “插入” 一 “主题 "命令 (或 按 Enter 键 ), 即 可 在 分 支 主题 的 下 方 插入 
同 级 主题 ,如 图 4-6 所 示 。 


| 双击 输入 主题 名 称 


图 4-6 插入 同 级 主题 
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3. 插入 主题 信息 


在 菜单 栏 中 选择 “插入 "菜单 ,在 下 拉 菜 单 中 选择 相应 的 命令 ,可 以 添加 图 标 、 图 片 、 联 
系 、 外 框 概 要 、 附 件 等 主题 信息 ,如 图 4-7 所 示 。 或 者 单 击 工具 栏 中 的 图 片 图 标 国 ,在 弹出 
的 下 拉 菜 单 中 选择 对 应 的 命令 , 即 可 快速 插入 主题 信息 ,如 图 4-8 所 示 。 


插入 0) 修改 fg) 工具 C) 窗口 OD 帮助 | 


号 主题 中 Enter 
品 子 主题 6S) 插入 

号 主题 之 前 ) @) ShifttEnter 
记 区 主题) CtrltEnter 
二 自由 主题 中) 

到 自由 中心 主题 吕 ) 

品 标 译 轨 AlttEnter 


4 
Cit 


[5 录音 [Fro] 10) 


图 4-7 利用 “插入 ”菜单 插入 主题 信息 图 4-8 利用 图 片 插入 主题 信息 


4. 设置 主题 格式 
用 户 可 以 通过 “属性 ”面板 设置 自己 喜欢 的 结构 图 的 样式 ,如 图 4-9 所 示 。 下 面 对 常 用 
操作 进行 介绍 。 


图 4-9 在 “属性 ”面板 中 设置 结构 图 样式 
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(1) 结构 。 可 以 改变 结构 图 的 方向 及 结构 ,如 向 下 的 组 织 结构 图 .向 右 的 树 状 图 等 。 单 


击 [ 芝 局 图 辣 , 即 可 打开 下 拉 列 表 , 如 图 4-10 所 示 。 
(2) 我 的 样式 。 可 以 为 主题 选择 并 应 用 样式 , 单 击 EEBHER ， 司 即 可 弹 
出 下 拉 列 表 , 选 择 一 个 样式 即 可 ,如 图 4-11 所 示 。 也 可 以 添加 或 编辑 样式 ,但 该 功能 需要 付 
费 才 可 以 使 用 。 
我 的 样式 
[选择 并 应 用 习 
1 ww 开 


图 4-10 结构 下 拉 列 表 图 4-11 选择 并 应 用 样式 下 拉 列 表 


(3) 文字 。 用 于 更 改 主 题 文 字 的 属性 。 


。 选择 字体 : 单 击 功 asas 并 ,如 图 4-12 所 示 ,在 弹出 的 下 拉 列 表 中 选择 
字体 即 可 。 
文字 
Open Sans 参 
10 :B87 必 轩 三 -M- 
图 4-12 选择 字体 


*“ 字 体 " 对 话 框 : 单 击 耻 按钮 , 即 可 打开 “字体 ”对 话 框 ,如 图 4-13 所 示 。 在 其 中 可 以 
选择 字体 、 调 整 文字 大 小 、 样 式 及 颜色 , 单 击 “ 确 定 ” 按 钮 即 可 。 


文字 大 小 


文字 样式 


文字 颜色 


图 4-13 “字体 "对话 框 
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。 文字 样式 。 可 以 设置 文字 大 小 .加 粗 、 斜 体 . 加 删除 线 、 颜 色 等 , 同 Word 类 似 ,如 
图 4-14 所 示 。 


图 4-14 设置 文字 样式 


5. 保存 /导出 


(1) 保存 导 图 。 执 行 “文件 ”一 “保存 新 的 版 本 ”命令 (或 按 Ctrl 十 S 键 ), 在 弹出 的 “保存 ” 
对 话 框 中 输入 名 称 ,选择 “我 的 电脑 " 单 选 按钮 ,如 图 4-15 所 示 。 单 击 “ 保 存 ” 按 钮 , 即 可 弹出 
选择 位 置 的 “保存 ”对 话 框 ,如 图 4-16 所 示 。 单 击 “ 保 存 ” 按 钮 即 可 。 
EE 
名 称 : 主要 和 


位 置 : 珊 呈 脑 
广 mind Cloud [Pro] 


L_ 合 6) |] 了 消 


图 4-15 “保存 "对 话 框 


划 
GO Dn em Fo 加 


组 织 > 新 建文 件 来 EE > 和 @ 
浊 最 ii 的 位 置 二 | 帮 称 二 修 疏 日期 类 型 大 < 
局 床 上 BaiduletdiskDornload 2018/11/14 14:13 ”文件 夹 
图 视频 BD Cloudllusic 2018/12/21 14:54 。 文件 夹 
辑 图 片 点 Downlosd 2018/9/4 11:13 文件 夹 
文档 BD DriversBackup 2018/6/1 14:52 文件 夹 
. -A DB Tisvcloud 2018/6/22 14:39 。 文件 夹 
wponloeds 2018/9/17 15:58 ”文件 夹 
村 计算 机 上 Progran Files 2017/12/15 14:33 。 文件 夹 
生 本 Ji) BD PsAutoRecover 2018/8/21 11:51 文件 夹 
Bi 5 和 瑟 大 苦 的 文件 夹 2018/4/24 15:01 文件 来 
es 四 大 彰 交 接 的 工作 2018/4/26 11:36 ”文件 夹 
Ra 了 jz » 
文件 名 mE 于 司 
保存 类 型 Ci miniIf 尘 本 


-eee [es | 


图 4-16 选择 保存 位 置 


(2) 导出 图 片 。 执 行文 件 ” 一 导出 ?命令 ,在 弹出 的 “导出 ?对 话 框 中 选择 “图 片 ? 选 项 ， 
如 图 4-17 所 示 。 单 击 “ 下 一 步 ? 按 钮 ,会 弹出 “导出 为 图 片 " 对 话 框 ,选择 图 片 格式 和 保存 位 
置 , 如 图 4-18 所 示 , 单 击 “ 完 成 ”按钮 即 可 。 
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EE 3 | | 
图 4-17 “导出 ”对 话 框 


ol 
生成 单 张 图 片 及 
将 造 中 的 思维 叶 贱 为 音 终 片 并 傈 存在 本 机 EI 


上 sm | Tm | 亚 


图 4-18 “导出 为 图 片 ” 对 话 框 


阶段 案例 : 产品 结构 图 绘制 


为 了 能 更 加 清晰 地 梳理 产品 的 功能 .本 案例 以 洗刷 刷 App 产品 为 例 ,绘制 产品 结构 图 。 
根据 产品 需求 ,将 洗刷 刷 App 分 为 4 个 模块 ,分 别 是 “首页 “订单 “我 的 "和 “登录 ”模块 ,如 
图 4-19 所 示 。 下 面 以 “首页 ”模块 为 例 讲解 绘制 产品 结构 图 的 思路 和 步骤 。 


手机 号 登录 
手机 号 注册 


用 户 注册 协议 


日 登录 


密码 找 回 
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自动 定位 
定 他 地 点 一 时 
搜索 商品 及 服务 
级 栏 区 柜台 扫 案 酉 _、 扫 过 商品 _9 理 看 历史 所 索 信息 
下 看 新 信息 
消息 6[ 查看 历史 信息 
出 除 信息 
充值 海报 
1 ef 
ne 
优惠 礼 关 
积分 商品 分 类 “| 超 值 礼品 
积分 商城 所 有 商品 
积分 
口 
和 交换 记录 
快速 AD g| 查看 商品 
洗车 卡 海报 
选择 小 区 
加 入 我 们 唱 “ 扫 一 要 二 维 码 进 微 信 群 
洗车 卡 海报 
条 要 光 革 “6 半 革 服务 列表 
订单 态 
一 去 支付 
要 未完 所 订单 一 
再 次 预约 
查看 已 完成 订单 eg[ 评价 
出 际 订 音 


查看 个 人 信息 
更 改 个 人 资料 信息 


查看 已 使 用 


优惠 券 _e| 查看 未 使 用 日。 使 用 优惠 估 


积分 商城 订单 


洗车 卡 未 使 用 洗车 卡 日 ”查看 剩余 次 数 
| 已 失效 洗车 卡 “日” 查看 剩余 次 数 
编辑 联系 人 信息 

常用 联系 人 信息 删除 联系 人 信息 

新 塌 联 系 人 信息 
更 改 登录 账号 
设置 /更 改 登 录 密码 
设置 /更 改 支付 密码 


账号 安全 


挨打 客 肝 电话 


图 4-19 洗刷 刷 App 产品 结构 图 


ES 
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1. 绘制 思路 


首页 是 App 产品 的 门面 ,其 中 几乎 包含 了 App 产品 所 有 功能 模块 的 入 口 以 及 重要 信 

息 ,可 以 将 洗刷 刷 App 首页 分 为 3 个 区 域 ,分 别 是 导航 栏 区域 .Banner 推广 图 信息 区 域 和 快 

速 信 口 区 域 ,在 各 个 区 域内 有 不 同 的 功能 ,用 户 点 击 某 个 区 域 即 可 进入 相应 的 页 面 。 下 面 对 

各 个 区 域 的 功能 进行 介绍 。 

(1) 导航 栏 区 域 有 以 下 功能 : 

。 定位 地 点 。 为 了 方便 用 户 查 看 当前 的 地 点 ,首页 需 提 供 定位 服务 。 单 击 该 按钮 即 可 
进行 手动 定位 。 

。 搜索 商品 。 为 了 方便 用 户 快速 找到 商品 及 服务 ,首页 需 提供 搜索 功能 。 为 了 便于 用 
户 查看 以 前 的 搜索 信息 , 当 用 户 点 击 搜索 框 时 ,下 方 会 展示 历史 搜索 记录 。 

。 查 看 消息 。 为 了 方便 用 户 快速 收 到 通知 消息 ,首页 要 提供 消息 模块 的 入 口 ,点 击 该 
按钮 后 ,可 以 查看 新 消息 及 历史 消息 ,还 可 以 对 消息 进行 删除 。 

(2) Banner 推广 图 信息 区 域 主要 用 于 展示 公司 活动 ,用 户 可 以 在 该 区 域 浏览 到 最 新 的 

活动 信息 。 

(3) 快速 入 口 区 域 有 以 下 功能 : 

。 优惠 充值 。 提 供 该 功能 可 以 使 用 户 洗车 更 便宜 。 用 户 一 旦 充值 ,就 会 在 平台 消费 ， 

也 在 一 定 程度 上 增加 了 用 户 的 素性 。 

积分 商城 。 当 用 户 在 平台 消费 时 ,就 会 产生 积分 ,用 户 可 以 用 积分 兑换 商城 里 面 的 

商品 ,在 一 定 程度 上 也 增加 了 用 户 的 黏 性 。 

购买 洗车 卡 。 和 优惠 充值 类 似 , 只 是 方式 不 同 ,洗车 卡 对 应 洗车 次 数 。 用 户 一 旦 购 

买 洗车 卡 ,就 会 在 平台 消费 ,增加 了 用 户 的 黏 性 。 

。 加 入 我 们 。 为 了 能 够 随时 吸引 用 户 , 特 意 添加 了 ”加 入 我 们 ?功能 ,点 击 后 会 出 现 一 
个 二 维 码 ,利用 微 信 扫 一 扫 功 能 即 可 加 入 微 信和 群 。 商 家 可 以 利用 微 信 和 群 维护 用 户 ， 
从 而 增加 用 户 使 用 产品 的 频率 。 

。 我 要 洗车 。 洗 车 是 洗刷 刷 App 的 主 营业 务 ,该 功能 可 以 方便 用 户 快速 预约 洗车 ,在 
此 放置 洗车 海报 可 以 吸引 用 户 的 视线 。 


2. 实现 方法 


了 解 了 首页 的 功能 模块 后 , 接 下 来 对 首页 的 结构 图 进行 绘制 。 首 先 要 列 出 首页 的 功能 
区 域 ,其 次 对 各 功能 区 域 的 模块 进行 细 分 。 下 面 详细 讲解 绘制 首页 结构 图 的 步骤 。 
Stepl 打开 XMind 软件 ,新 建 思维 导 图 ,选择 “专业 ”风格 ,如 图 4-20 所 示 。 单 击 “ 新 
建 "按钮 即 可 新 建 一 个 思维 导 图 。 将 主题 中 心 重 命 名 为 首页 ,如 图 4-21 所 示 。 
Step2 ”执行 “插入 ”一 “ 子 主题 "命令 (或 按 Tab 键 ) 创 建 子 主题 ,分 别 列 出 首页 的 功能 及 
信息 模块 ,如 图 4-22 所 示 。 
Step3 ”根据 绘制 思路 ,对 各 功能 模块 进行 细 分 .如 图 4-23 所 示 。 至 此 ,洗刷 刷 App 首 
页 的 结构 图 绘制 完成 。 
注意 : 产品 结构 图 需要 不 断 完善 。 产 品 经 理 在 本 阶段 绘制 的 产品 结构 图 并 不 一 定 是 最 
终 版 本 ,在 根据 产品 结构 图 绘制 低 保 真 原型 图 时 ,需要 对 本 阶段 的 产品 结构 图 进行 完善 。 
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图 4-20 选择 “专业 ?风格 


图 4-21 更 改 主题 名 称 


Banner 推 广 图 信息 


图 4-22 首页 功能 模块 
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自动 定位 


定位 地 点 


搜索 商品 及 服务 


= 查看 历史 搜索 信息 


查看 新 消息 


搜索 框 


导航 栏 区 域 fe 


一 | Banner 推 广 图 信息 
oe 
优惠 充值 优惠 金富 排序 

”查看 商品 


| 快速 口 je 


加 入 我 们 © ” 扫 一 扫 二 维 码 进 微 信 群 


-| 洗车 服务 列表 
图 4-23 首页 功能 模块 细 分 


4.2 产品 流程 图 


在 设计 互联 网 产品 时 ,需要 明确 梳理 出 产品 具体 的 业务 环节 和 转 接 关 系 , 确 定 业 务 环 节 
的 先后 顺序 , 简 而 言 之 ,就 是 要 对 产品 的 流程 进行 分 析 和 与 设计 。 所 谓 流程 ,是 指 用 户 操 作 
的 前 后 顺序 ,例如 用 户 使 用 微 信 之 前 一 定 要 注册 自己 的 账号 ,又 如 账号 已 被 注册 时 会 出 现 相 
应 的 提示 。 要 将 流程 展示 出 来 ,就 需要 用 到 产品 流程 图 。 本 节 将 对 什么 是 产品 流程 图 和 产 
品 流程 图 的 绘制 方法 进行 讲解 。 


4.2.1 产品 流程 图 简介 

一 张 简明 的 产品 流程 图 ,不 仅 能 促进 产品 经 理 与 设计 师 . 开 发 者 的 交流 ,还 能 帮助 设计 
人 员 查 漏 补缺 ,避免 流程 出 现 遗 漏 ,确保 流程 的 完整 性 。 产 品 流程 图 分 为 业务 流程 图 ,数据 
流程 图 .页面 流程 图 3 类 ,具体 介绍 如 下 。 

1. 业务 流程 图 


业务 流程 图 主要 是 描述 业务 走向 ,用 一 些 规定 的 符号 及 连 线 表示 某 个 具体 业务 的 处 理 
过 程 。 例 如 刷牙 流程 如 图 4-24 所 示 。 


铭 牙 刷 / 牙 寡 ) 一 | 拼 牙 膏 | | 放 牙 育 | 一 | 激 口 | 一 | 刷牙 | 一 | 激 口 一 | 洗 牙 刷 一 (放置 牙刷 ) 


图 4-24 刷牙 流程 
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多 学 一 招 : 泳 道 图 

泳 道 图 是 将 模型 中 的 活动 按照 职责 组 织 起 来 。 这 种 分 配 可 以 通过 用 线 分 开 的 不 同 区 
域 来 表示 。 由 于 这 些 并 列 的 区 域 形似 泳 道 , 因 此 这 种 图 被 称 为 泳 道 图 。 它 可 以 方便 地 描 
述 企业 的 各 种 业务 流程 ,直观 地 描述 系统 的 各 活动 之 间 的 逻辑 关系 ,有 利于 用 户 理解 业 
务 逻 辑 。 

在 一 个 产品 中 ,会 涉及 多 种 用 户 的 业务 流程 ,如 买 家 、 卖 家 、 第 三 方 等 ,对 于 产品 中 包含 
的 所 有 业务 流程 都 要 进行 分 析 和 设计 ,以 便 让 研发 人 员 全 面 了 解 产品 的 功能 逻辑 。 图 4-25 
为 某 购物 软件 的 泳 道 图 。 


购买 商品 "| 支付 让 商品 打包 


图 4-25 某 购 物 软件 的 泳 道 图 


由 图 4-25 可 以 看 出 ,购买 商品 、 签 收 / 拒 收 都 是 买 家 的 行为 ,商品 打包 ,发 货 、 退 款 / 退 货 
等 都 是 卖家 的 行为 ,购物 涉及 的 支付 和 物流 则 是 第 三 方 的 行为 ,如 果 商家 有 自己 的 支付 或 物 
流 公司 , 则 支付 ,物流 也 属于 卖家 的 行为 。 


2. 数据 流程 图 


数据 流程 图 是 对 业务 流程 图 的 进一步 抽象 与 概括 。 抽 象 性 表现 在 它 完全 舍 去 了 具体 的 
行为 ,只 剩 下 数据 的 流动 ,加 工 处 理 和 存储 。 值 得 注意 的 是 ,一 般 的 业务 流程 图 中 已 经 包含 
了 数据 流程 图 ,因此 在 实际 工作 中 很 少 绘制 数据 流程 图 。 


3. 页 面 流程 图 


页 面 流程 图 描述 了 用 户 完成 一 个 任务 需要 经 过 哪些 页 面 。 图 4-26 为 一 个 购物 App 的 
页 面 流程 图 。 
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图 4-26 购物 App 的 页 面 流程 图 


4.2.2 产品 流程 图 绘制 
下 面 对 流程 图 的 基本 符号 ,流程 图 的 基本 结构 ,绘制 流程 图 时 需要 注意 的 问题 以 及 绘制 


流程 图 的 工具 进行 讲解 。 
1. 流程 图 的 基本 符号 


流程 图 是 一 种 用 于 沟通 的 图 形 化 语言 ,通常 会 使 用 一 些 符号 代表 某 些 意义 ,以 便于 识 
别 。 绘 制 流程 图 的 习惯 做 法 是 : 圆 角 和 矩形 表示 开始 或 结束 ,矩形 表示 普通 工作 环节 ,菱形 表 
示 判 定 , 箭 头 表示 工作 流 方向 。 流 程 图 基本 符号 如 表 4-1 所 示 。 


表 4-1 流程 图 基本 符号 


符 ” 号 名 称 意义 
(GG 开始 或 结束 表示 流程 图 的 开始 或 结束 
即 操作 或 处 理 ,表示 某 一 个 具体 
流程 pe 
< 判定 表示 判定 条 件 
文档 表示 输入 或 输出 的 文档 
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续 表 
符 号 各 区 意义 
I 子 流程 表示 已 定义 的 子 流程 
用 于 连接 其 他 符号 ,箭头 表示 流 
Em 和 转 方向 


通过 这 些 符号 ,可 以 清晰 地 描述 产品 的 业务 流程 及 使 用 逻辑 。 通 过 分 析 产 品 的 业务 流 
程 , 即 可 得 到 业务 流程 图 。 从 产品 经 理 的 角度 来 看 ,产品 的 业务 流程 图 就 是 用 户 使 用 产品 的 
过 程 。 


2. 流程 图 的 基本 结构 


流程 图 有 3 种 基本 结构 , 即 顺序 结构 .选择 结构 及 循环 结构 。 下 面 对 这 3 种 结构 逐一 进 
行 讲 解 。 


1) 顺序 结构 
顺序 结构 就 是 按照 先后 顺序 执行 的 流程 ,是 最 简单 的 一 种 结构 。 1 
它 的 执行 顺序 是 自 上 而 下 ,依次 执行 ,如 图 4-27 所 示 。 其 中 A、B 是 
按照 顺序 执行 的 ,在 完成 A 操作 后 ,就 会 继续 执行 B 操 作 。 1 
2) 选择 结构 B 
选择 结构 又 称 分 支 结构 ,根据 是 否 满足 条 件 而 从 两 个 操作 中 选 1 
择 一 个 操作 执行 ,如 图 4-28 所 示 。 出 口 
值得 注意 的 是 ,两 个 操作 之 一 可 以 为 空 操作 ,如 图 4-29 所 示 。 图 4-27 顺序 结构 
入 口 入口 
成 立 < 人 人 > 成 立 到 个 > 
1 1 
A B A 
出 口 出 口 
图 4-28 选择 结构 图 4-29 有 一 个 空 操作 的 选择 结构 
3) 循环 结构 


循环 结构 又 称 重复 结构 ,是 指 在 一 定 条 件 下 反复 执行 某 一 操作 。 循 环 结构 又 可 分 为 直 
到 型 结构 和 当 型 结构 ,具体 解释 如 下 。 

直到 型 结构 是 指 先 执行 某 一 操作 ,再 判断 条 件 。 当 条 件 成 立时 ,退出 循环 ; 当 条 件 不 成 
立时 ,继续 循环 。 直 到 型 结构 如 图 4-30 所 示 。 
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当 型 结构 是 先 判断 条 件 。 当 条 件 成 立时 ,继续 循环 ; 当 条 件 不 成 立时 , 则 退出 循环 。 当 
型 结构 如 图 4-31 所 示 。 


各 一 
1 不 成 立 | we 
和 
出 口 国王 出 品 
图 4-30 直到 型 结构 图 4-31 当 型 结构 


脚下 留心 : 
这 3 种 结构 的 共同 特点 是 : 只 有 一 个 入 口 和 一 个 出 口 ,结构 内 的 每 一 个 操作 都 有 机 会 
被 执行 ,不 存在 死 循环 。 图 4-32 和 图 4-33 为 错误 的 流程 图 。 


入 口 各 一 
ame | 
出 口 a 

图 4-32 从 入 口 到 出 口 的 路 径 未 通过 A 图 4-33 死 循环 


3. 绘制 流程 图 时 需要 注意 的 问题 


绘制 流程 图 时 ,应 注意 以 下 几 个 问题 : 

(1) 应 按 从 左 到 右 、 从 上 到 下 的 顺序 排列 。 

(2) 从 开始 符 开始 ,以 结束 符 结束 。 值 得 注意 的 是 ,开始 符 只 能 出 现 一 次 ,而 结束 符 可 
出 现 多 次 。 

(3) 需要 认真 检查 各 个 步骤 或 条 件 判定 结果 ,避免 出 现 漏洞 ,导致 流程 无 法 形成 闭环 。 

(4) 连接 线 尽 量 避 免 交 叉 。 

(5) 必要 时 可 以 加 标注 ,以 便 更 清晰 地 说 明 流程 。 

(6) 在 流程 图 中 .如果 引用 其 他 已 经 定义 的 流程 图 ,不 需 重复 绘制 ,直接 用 符号 表示 已 
定义 的 流程 图 即 可 。 


4. 绘制 流程 图 的 工具 


常见 的 流程 图 绘制 工具 有 以 下 几 种 。 

1) 纸 和 笔 

纸 和 笔 是 最 简单 .实用 的 工具 ,其 缺点 是 不 易 修 改 , 如 图 4-34 所 示 。 值 得 注意 的 是 ,如 
果 选 择 用 纸 和 笔 绘制 流程 图 ,那么 准备 的 纸张 要 足够 大 。 
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> 人 性 孝 
A 
图 4-34 用 纸 和 笔 绘制 流程 图 


2) 亿 图 图 示 
亿 图 图 示 是 一 款 基于 矢量 图 的 流程 图 绘制 工具 ,具有 丰富 的 事例 库 和 模板 库 。 它 采用 
拖 电 式 操作 ,使 用 方便 ,简单 。 图 4-35 为 亿 图 图 示 的 界面 。 


CT 了 


图 4-35 亿 图 图 示 的 界面 


3) Visio 

Visio 是 优秀 的 绘图 软件 ,应 用 非常 广泛 。 它 采用 泳 道 图 的 方式 把 流程 和 流程 的 部 门 以 及 
岗位 关联 起 来 ,实现 流程 和 角色 的 对 应 。 与 亿 图 图 示 一 样 , Visio 采用 拖 电 式 操作 。 图 4-36 为 
Visio 的 界面 。 

4) ProcessOn 

ProcessOn 是 一 个 免费 画 流 程 图 的 网 站 ,可 以 多 人 同时 合作 绘制 一 张 流 程 图 。 图 4-37 
为 ProcessOn 的 界面 。 
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图 4-37 ProcessOn 的 界面 


5) Axure 
Axure 是 用 来 绘制 原型 图 的 工具 ,但 它 同 时 具有 绘制 流程 图 的 功能 ,将 元 件 拖 忠 至 工作 区 ， 
用 连接 线 连 接 , 即 可 轻松 绘制 出 流程 图 。 关 于 Axure 的 具体 介绍 详 见 第 2 章 , 此 处 不 再 蓝 述 。 


阶段 案例 : 业务 流程 图 绘制 


若 一 个 功能 模块 有 完整 的 业务 流程 , 则 可 将 其 作为 一 个 单独 的 模块 。 例 如 ,洗刷 刷 
App 分 为 “我 要 洗车 “积分 商城 “订单 “个 人 中 心 ”等 模块 。 本 案例 以 洗刷 刷 App 产品 的 
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洗车 、 积 分 商城 和 登录 /注册 为 例 ,运用 Axure 制作 产品 的 业务 流程 图 。 由 于 Axure 中 并 无 
代表 子 流程 或 已 定义 流程 的 符号 ,因此 需要 将 子 流程 符号 绘制 出 来 。 


1. 洗车 流程 图 


绘制 复杂 的 流程 图 时 ,为 了 明确 流程 图 的 大 致 走向 ,进而 保证 流程 图 的 准确 性 ,一 
般 需要 先 将 业务 的 大 致 流程 绘制 出 来 ,再 逐步 细 化 。 下 面 对 洗 车 流程 图 进行 绘制 。 由 
于 洗车 是 一 个 复杂 的 流程 ,因此 需要 将 洗车 的 基本 流程 图 绘制 出 来 ,再 进行 细 化 。 为 
了 方便 研发 团队 的 分 工 合 作 , 可 以 将 复杂 的 流程 图 拆 分 成 主流 程 图 和 子 流程 图 ,具体 
讲解 如 下 。 

Stepl ” 先 用 纸 笔 将 洗车 的 基本 流程 图 绘制 出 来 ,如 图 4-38 所 示 。 


(CF 始 一 ~| 选择 将 车 业务 | 预约 洗车 | -| 用 户 洗车 |- 结束 ) 


图 4-38 洗车 基本 流程 图 


Step2 ”打开 Axure 软件 , 单 击 库 面板 中 的 选项 按钮 号 ,在 弹出 的 菜单 中 选择 “创建 元 
件 库 " 命 令 , 在 “保存 Axure RP 库 ? 对 话 框 中 输入 * 子 流程 ”作为 新 元 件 库 的 名 
称 , 单 击 “ 确 定 "按钮 , 即 可 打开 新 窗口 ,如 图 4-39 所 示 。 


SET 


图 4-39 创建 新 元 件 库 


Step3 ”双击 图 4-40 中 的 “新 元 件 ”, 在 工作 区 绘制 子 流程 符号 ,如 图 4-40 所 示 。 按 Ctrl 十 S 
组 合 键 进行 保存 ,并 关闭 文件 。 


il 


图 4-40 子 流程 符号 
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Step4 单 击 库 面 板 中 的 选项 按钮 三 ,在 弹出 的 菜单 中 选择 “刷新 元 件 库 ”命令 , 即 可 看 
到 *“ 子 流程 ”元件 库 ,如 图 4-41 所 示 。 


库 = Q| 
3 |  T 载 元 作 库 0)- 


载 入 元 件 库 中 
| | 从 imurs Share 加 载 . 
新 元 件 1 创建 元 件 床 C) 
编辑 元 件 库 E) 
着 载 元 件 库 5) 


图 4-41 刷新 元 件 库 


Step5 将 Home 页 面 的 名 称 改 为 "洗车 流程 >。 右 击 该 页 面 , 在 弹出 的 快捷 菜单 中 选择 
“图 标 类 型 "一 “流程 图 "命令 ,如 图 4-42 所 示 。 删 除 Pagel 一 Page3 子 页 面 。 


图 4-42 更 改 图 标 类 型 


Step6 ”在 页 面 面 板 中 , 单 击 两 次 “新 增 页 面 " 按 钮 ,新 增 两 个 页 面 ,并 分 别 将 它们 命名 为 
“积分 商城 流程 "和 “登录 /注册 流程 ”, 按 照 Step5 的 方法 将 其 图 标 类 型 改 为 “ 流 
程 图 ”, 如 图 4-43 所 示 。 

Step7 ”双击 “洗车 流程 ”页面 ,将 元 件 拖 忠 至 页 面 编 辑 区 ,根据 流程 图 符号 规范 修改 元 
件 形状 ,并 添加 文字 说 明 , 如 图 4-44 所 示 。 


站 洗车 流程 二 
品 积分 商城 流程 @ 开始 | 选择 洗车 业务 
只 登录 注册 污 程 

图 4-43 ”新建 的 3 个 页 面 图 4-44 更 改元 件 形状 及 文字 说 明 


Step8 单 击 样式 工具 栏 中 的 连接 按钮 品 , 当 经 过 第 一 个 元 件 的 连接 点 且 光 标 变 成 红色 
的 圆圈 时 , 单 击 以 确定 起 点 ,如 图 4-45 所 示 。 拖 动 鼠 标 ,与 第 二 个 元 件 的 连接 
点 连接 ,如 图 4-46 所 示 。 


fe 一 ~ % 

* 我 要 洗车 伸 ， 选择 洗车 业务 人 我 要 洗车 | Oe 
es i x 
图 4-45 ”确定 连接 起 点 图 4-46 ”确定 连接 终点 


Step9 ”选择 洗车 业务 之 后 ,要 判定 软件 是 否 对 用 户 的 地 点 进行 了 自动 定位 。 若 已 经 定 
位 ,那么 继续 下 面 的 流程 , 即 选择 规格 、 选 择 服务 点 。 然 后 ,用 户 确定 是 否 预约 ， 
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若 不 预约 则 流程 结束 , 若 预 约 则 继续 下 面 的 流程 ,如 图 4-47 所 示 。 


手动 定位 


和 
选择 服务 点 


图 4-47 洗刷 刷 App 洗车 业务 流程 图 的 部 分 结果 


Step10 ”系统 要 判定 用 户 是 否 选择 了 预约 时 间 、 是 否 有 联系 人 信息 、 是 否 使 用 优惠 券 
等 。 确 认 预 约 单 可 以 作为 一 个 独立 的 业务 流程 ,因此 将 其 作为 子 流程 图 进行 
绘制 ,如 图 4-48 所 示 。 


选择 预约 时 间 


新 增 联系 人 


自动 识别 / 提示 无 可 
更 改 联系 人 用 优惠 券 


选择 优惠 券 


图 4-48 ”确认 预约 单子 流程 图 
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Stepl1 接 下 来 完善 洗车 流程 。 在 提交 预约 单 之 后 ,用 户 要 按 约 定时 间 洗 车 并 进行 评 
价 , 如 图 4-49 所 示 。 


手动 定位 


图 4-49 洗车 主流 程 图 


Step12 按 Ctrl 十 S 键 保存 文件 ,在 弹出 的 “另存 为 ?对话 框 中 输入 文件 名 称 , 如 图 4-50 
所 示 。 至 此 ,洗车 流程 图 绘制 完成 。 


2. 积分 商城 流程 图 


积分 商城 使 用 积分 兑换 商品 。 一 般 来 说 ,进入 积分 商城 后 ,首先 会 查看 商品 详情 ,然后 
才 会 对 商品 进行 兑换 。 兑 换 时 ,系统 要 判断 用 户 是 否 填写 了 地 址 、 积 分 是 否 充足 。 由 于 积分 
商城 的 流程 比较 简单 .按照 绘制 洗车 流程 图 的 方法 直接 绘制 积分 商城 流程 图 即 可 。 积 分 商 
城 流程 图 如 图 4-51 所 示 。 
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人 [二 -wm- 和 到 -ee 原 了“ 加 [is 


组 织 > 六 伯 夫 二-@ 


有 雪 二 -~ 人 kB EE 
国 点 面 
习 最 近 访 问 的 位 轩 没有 与 搜索 条 件 加 的 项 。 
司库 
图 视频 
图 图 上 
国文 悄 
闻 迅雷 下载 
直言 乐 
二 计算 机 
入 本 bi 盘 人 :) 
软件 @:) 
is m.) | 划 
文件 名 虽 攻 恒 囊 po- 到 各 加 国 
保存 类 型 四 |Axure RP 文件 *-rp) 加 
-naan 器 
3 


图 4-50 “另存 为 "对 话 框 


图 4-51 积分 商城 流程 图 


3. 登录 /注册 


App 启动 之 后 ,用 户 要 先 登 录 , 才 能 使 用 App。 当 用 户 开启 软件 时 ,首先 由 后 台 对 用 户 
的 登录 状态 进行 判定 。 如 果 登 录 状 态 为 “已 登录 ”, 那 么 用 户 就 会 直接 进入 App 首页 。 如 果 
登录 状态 为 “未 登录 ” ,那么 用 户 要 自己 判断 有 无 账号 。 若 有 , 即 可 直接 登录 ; 若 无 , 便 要 注册 
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新 账号 。 登 录 / 注 册 主 流程 图 如 图 4-52 所 示 。 下 面 对 登 录 和 注册 的 子 流程 图 绘制 过 程 进行 
讲解 。 


(启动 软件 


a 注册 子 流程 


| 登录 子 流程 


图 4-52 洗刷 刷 App 的 登录 /注册 主流 程 图 


1) 登录 子 流程 图 
登录 时 用 户 需 要 输入 账号 和 密码 ,系统 需要 判定 账号 和 密码 是 否 正 确 。 登 录 子 流程 图 
如 图 4-53 所 示 。 下 面 对 账 号 不 正确 和 密码 不 正确 这 两 种 情况 进行 分 析 。 


人 单 击 “ 登 录 " 按钮 ) 
注册 
子 流程 
忘记 密码 
子 流程 


是 
否 K 号 、 密 符 是 
于 和 国 上 让 王 EE 


图 4-53 登录 子 流程 


。 账号 不 正确 时 ,用 户 要 重新 输入 账号 , 且 要 确认 账号 是 否 被 注册 。 若 没有 被 注册 ,用 
户 需 要 用 该 账号 进行 注册 ; 若 已 经 被 注册 ,用 户 输入 正确 的 账号 即 可 。 
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。 密码 输入 不 正确 时 , 若 用 户 输入 错误 密码 未 超过 3 次 就 输入 了 正确 密码 ,就 可 以 直 
接 进入 洗刷 刷 App 首页 ; 若 用 户 输入 错误 密码 超过 3 次 ,就 需要 输入 图 片 验 证 码 ， 
若 图 片 验 证 码 输入 错误 , 则 后 台 会 自动 更 换 图 片 验 证 码 , 直 至 用 户 输 入 正确 的 图 片 
验证 码 和 正确 的 账号 ,密码 , 方 可 进入 洗刷 刷 App 首页 。 若 用 户 忘记 密码 , 则 点 击 
“忘记 密码 ”, 即 可 通过 手机 号 找 回 密码 。 忘 记 密 码 子 流程 图 如 图 4-54 所 示 。 


2) 注册 子 流程 图 


当 用 户 没 有 洗刷 刷 App 的 账号 时 ,就 需要 用 手机 号 为 自己 创建 一 个 账号 。 当 用 户 输入 
手机 号 时 ,系统 判定 该 账号 是 否 已 经 被 注册 ,或 者 格式 是 否 正确 。 若 该 账号 已 经 被 注册 , 那 
么 用 户 可 以 选择 用 原 有 账号 登录 ,也 可 以 选择 用 新 手机 号 注册 。 

在 用 新 手机 号 注册 时 ,为 了 验证 该 手机 号 是 否 可 用 ,系统 会 发 送 验证 码 。 若 该 手机 号 可 


用 ,用 户 输入 验证 码 即 可 进行 下 一 步 
次 输入 密码 。 图 4-55 为 洗刷 刷 App 的 注册 子 流程 图 。 


输入 新 密码 。 为 了 防止 用 户 按 错 键 ,用户 需 要 再 一 


( 伴 击 “注册 " 按钮) 
1 1 
获取 验证 码 i) 
E 则 否 
手机 号 是 > 下 撤 
正 否 
1 获取 验证 码 [登录 子 流程 
输入 验证 码 |- 
否 手机 号 是 
证 码 是 否 让 正 克 ?一 
是 
1 是 输入 验证 码 ” |- 一 
输入 新 密码 
1 ps 否 
给 证 码 是否 
确认 新 密码 A 
1 1 
登录 子 流程 单 击 “注册” 按钮 
Cm 
图 4-54 ”忘记 密码 子 流程 图 图 4-55 注册 子 流程 图 


多 学 一 招 : 验证 码 的 作用 


验证 码 是 一 种 区 分 用 户 是 计算 机 还 是 人 的 自动 程序 ,可 以 防止 恶意 破解 密码 、 刷 票 、 在 
论坛 中 灌水 ,有 效 防 止 黑客 对 特定 注册 用 户 用 暴力 破解 方式 不 断 进行 登录 尝试 。 验 证 码 是 


网 站 通行 的 方式 。 
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学 习 目 标 

。 了解 低 保 真 原型 图 的 绘制 规范 。 

。 掌握 绘制 低 保 真 原型 图 的 方法 。 

。 了解 产品 需求 文档 。 

。 掌握 撰写 产品 需求 文档 的 方法 。 

产品 研发 出 来 之 前 ,通常 通过 低 保 真 原型 图 将 产品 经 理 的 想法 传达 给 设计 、 研 发 和 测试 
人 员 ,进而 产 出 产品 需求 文档 。 低 保 真 原型 图 就 是 用 线条 或 图 形 绘制 出 来 的 产品 框架 。 本 
章 以 洗刷 刷 App 项 目 为 例 , 讲 解 低 保 真 原型 图 的 绘制 规范 .实现 方法 和 产品 需求 文档 。 


5.1 低 保 真 原型 图 绘制 规范 


低 保 真 原型 图 是 互联 网 产品 设计 阶段 最 重要 的 产物 之 一 ,也 是 产品 经 理 的 必 备 技能 之 
一 。 低 保 真 原型 图 汇集 了 产品 的 主要 功能 ,可 以 使 研发 团队 在 产品 实现 之 前 更 加 直观 地 认 
识 和 理解 产品 。 在 绘制 低 保 真 原型 图 时 ,要 遵循 低 保 真 原型 图 的 绘制 规范 。 本 节 对 低 保 真 
原型 图 的 绘制 规范 进行 详细 讲解 。 


1. 尺寸 规范 


在 绘制 低 保 真 原型 图 时 ,没有 固定 的 尺寸 要 求 ,通常 是 根据 适 配 机 型 来 制作 低 保 真 原型 
图 。 例 如 ,根据 iPhone 6 适 配 的 低 保 真 原型 图 的 尺寸 为 375 像素 X667 像素 ,如 表 5-1 和 
图 5-1 所 示 。 本 章 的 低 保 真 原型 图 均 根据 iPhone 6 适 配 尺寸 进行 制作 。 


表 5-1 iPhone 6 低 保 真 原型 图 尺寸 规范 单位 : 像素 
宽 X 高 状 态 栏 导 航 栏 标 签 栏 
375X667 375X20 375X44 375X49 


2. 字体 规范 


低 保 真 原型 图 没有 具体 的 字体 规范 。 一 般 情 况 下 ,导航 栏 内 的 标题 字号 要 大 于 内 容 标 
题字 号 ,内容 标题 字号 要 大 于 内 容 正 文字 号 ,一 般 选 择 微软 雅 黑 、 黑 体 等 常用 字体 ,如 图 5-2 
所 示 。 


667 像 素 


一 标签 栏 49 像 素 


图 5-1 iPhone 低 保 真 原型 图 尺寸 规范 


TS 
导航 栏 标题 


内 容 标题 
内 容 
内 容 


图 5-2 低 保 真 原型 图 的 字体 示例 


3. 颜色 规范 
原型 图 中 包含 了 多 种 颜色 。 低 保 真 原型 图 没有 具体 的 颜色 规范 ,除了 元 素 自 带 的 且 不 
能 更 改 的 颜色 外 ,一 般 采 用 黑 、 白 、 灰 3 色 , 以 免 影响 UI 设计 师 设计 页 面 。 图 5-3 为 某 App 
低 保 真 原型 图 的 色 值 。 
背景 色 #F2F2F2 


边框 色 #CCCCCC 


5-3 某 App 低 保 真 原型 图 的 色 值 
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4. 元 件 规范 


为 了 使 低 保 真 原型 图 更 清晰 .整齐 ,一般 情况 下 ,元 件 与 元 件 之 间 需 要 对 齐 ,为 此 要 善于 
使 用 辅助 线 ( 创 建 辅助 线 的 方法 详 见 2. 4. 1 节 , 此 处 不 做 过 多 介绍 ) 。 


5. 页 面 及 页 面 命名 规范 
尽量 将 所 有 页 面 分 开展 示 ,如 图 5-4 所 示 。 


吕 返回 按钮 
| saa, sa 
[ey CE 1] 
吕 | meni ant 
“de” @ 
i EY © 
| © 
| | we Cm ] 
昌 
图 S$-4 低 保 真 原型 图 的 页 面 展示 
页 面 的 层级 要 明确 。 为 了 快速 找到 页 面 ,页 面 的 名 ,上 as 
称 一 般 可 以 采用 页 面 的 标题 ,如 图 5-5 所 示 。 4 0 涉 上 了 
从 图 5-4 和 图 5-5 中 可 以 清楚 地 看 出 页 面 之 间 的 层 。 ee 
级 关系 ,便于 快速 理解 功能 的 结构 。 页 面 层级 数量 不 宜 D wee 
过 多 ,如 果 出 现 4 级 以 上 的 页 面 ,就 需要 考虑 简化 页 面 。 “es 
层级 。 4 办 订单 
六 口 未 完成 订单 
注意 : 口 未 寺 友 J 音 洋 情 
(1) 在 绘制 低 保 真 原型 图 时 ,产品 经 理 只 需要 注意 D Es 
使 其 功能 完整 、 布 局 合理 ,而 页 面 美 现 因素 应 由 UI 设计 。。 日 Se 
师 负 责 。 图 5-5 页 面 命名 


(2) 页 面 的 层级 越 多 ,产品 的 易 用 性 越 差 。 


5.2 洗刷 刷 App 低 保 真 原型 图 制作 与 分 析 


随 着 互联 网 的 迅猛 发 展 ,高 智能 、 高 配置 的 移动 设备 成 为 各 大 互联 网 公司 的 发 展 方向 ， 
和 PC 端 产品 相 比 ,移动 端 产品 越 来 越 占据 着 网 民 的 碎片 时 间 。 手 机 作为 移动 设备 ,原来 只 
有 打 电 话 、 发 短信 等 功能 ,但 是 现在 人 们 能 通过 手机 打车 、 购 物 , 很 多 事情 都 可 以 通过 手机 来 
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做 。 那 么 ,手机 是 如 何 实现 这 一 切 的 呢 ? 就 是 因为 手机 里 面 有 了 小 小 的 App。 本 节 以 制作 
洗刷 刷 App 中 首页 ,积分 商城 和 登录 /注册 模块 的 低 保 真 原型 为 例 , 深 入 了 解 一 款 App 的 
诞生 。 


5.2.1 首页 功能 分 析 


根据 洗刷 刷 App 的 结构 图 (如 图 5-6 所 示 ) 可 知 ,首页 分 为 3 个 区 域 ,分 别 是 导航 栏 区 
域 .Banner 推广 图 信息 和 产品 各 个 模块 的 快速 入 口 ,具体 分 析 如 下 。 


定位 地 点 “ef 定位 


搜索 商品 及 服务 


抽检 9 扫 索 商品 | 埋 看 历史 搜索 信息 
查看 新 信息 


Banner 推广 图 信息 


优惠 充值 © ”优惠 金额 排序 
查看 商品 


进入 积分 商城 QQ 


“ray 


洗车 卡 海报 


购买 洗车 上 

加 入 我 们 局 ” 扫 一 扫 一 维 码 进 重信 
洗车 海报 

我 要 洗车 “| 洗车 服务 列表 


图 5-6 首页 结构 图 


在 导航 栏 区 域 中 包含 定位 地 点 .搜索 框 和 消息 3 个 模块 ,具体 分 析 如 下 。 

。 定 位 地 点 : 用 户 可 以 看 到 当前 定位 的 城市 。 若 自动 定位 失败 ,会 弹出 *GPS 定位 失 
败 ” 的 提示 框 。 若 想 进行 手动 定位 ,点 击 此 处 , 即 可 弹出 手动 定位 模 态 视 图 ,如 图 5-7 
所 示 。 

。 搜索 框 : 首页 提供 了 快速 搜索 功能 ,可 以 搜索 积分 商品 、 门 店 以 及 洗车 服务 等 。 

。 消息 : 单 击 “信息 ?按钮 可 以 快速 、 便 捷 地 查看 通知 信息 。 

Banner 推广 图 信息 是 用 于 宣传 产品 的 主要 区 域 , 内 容 可 以 是 优惠 信息 、 品 牌 宣传 、 活 动 

海报 等 ,用 户 可 以 查看 近期 的 活动 信息 。 
首页 中 提供 了 6 个 快速 功能 入 口 和 一 个 洗车 海报 ,具体 解释 如 下 。 
。 快速 入 口 : 分 别 是 “优惠 充值 “进入 积分 商城 “洗车 卡 海报 “购买 洗车 卡 “* 加 入 我 
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们 ”和 “我 要 洗车 ”, 点 击 按钮 即 可 进入 与 之 对 应 的 页 面 。 
。 洗车 海报 : 添加 一 个 海报 ,可 以 将 用 户 的 视线 快速 移 至 洗车 功能 。 
根据 洗刷 刷 App 的 结构 图 可 知 ,App 的 标签 栏 中 ,包括 “首页 “订单 “我 的 ”3 部 分 ,用 
户 可 以 通过 点 击 快速 进入 自己 想 前 往 的 页 面 。 在 不 同 页 面 ,导航 栏 内 的 按钮 及 文字 有 明显 
区 分 ,从 而 使 用 户 知道 当前 处 于 哪个 页 面 。 


| 
四 
Ba 
四 


N<x»<c-on0ozErxc-onmoo@> 


图 5-7 手动 定位 模 态 视图 


阶段 案例 : 洗刷 刷 App 首页 低 保 真 原型 图 制作 


1. 案例 分 析 


分 析 了 首页 的 功能 后 ,下 面 用 Axure 绘制 洗刷 刷 App 首页 的 低 保 真 原型 图 。 由 于 标签 
栏 , 状 态 栏 信息 及 页 面 背 景 是 洗刷 刷 App 的 公用 部 分 ,因此 在 绘制 的 时 候 , 先 将 这 些 公用 部 
分 转化 成 母 版 。 为 了 不 影响 视觉 效果 ,可 将 母 版 遮 单 取消 ,这 样 做 会 节省 很 多 时 间 。 本 案例 
采用 iPhone 6 尺寸 规范 制作 低 保 真 原型 图 。 


2. 实现 步骤 


Stepl 打开 Axure 软件 ,从 元 件 库 中 拖 电 矩形 元 件 至 Home 页 面 的 页 面 编辑 区 内 , 设 
置 其 “宽度 ”为 375 像素 高度? 为 667 像素 ,“ 描 边 ”为 无 ,将 填充 颜色 改 为 浅 灰 
色 (#F2F2F2), 如 图 5-8 所 示 ,效果 如 图 5-9 所 示 。 
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Step3 


Step4 


Steps 


Step6 


Step7 
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最 近 迁 择 的 是 近 的 页 面 
[+ | 加 
司 国 ” 呈 国 国 [Te 


图 5-8 修改 填充 颜色 


图 5-9 矩形 元 件 效果 


再 拖 忠 一 个 矩形 元 件 到 页 面 编辑 区 中 ,将 其 大 小 设置 为 375 像素 X64 像素 ,“ 描 
边 ? 为 无 ,填充 颜色 为 深 灰色 (# 3D4250) ,位 置 如 图 5-10 所 示 。 

按 住 Ctrl 键 , 拖 忠 鼠标 ,在 如 图 5-11 所 示 的 位 置 创建 全 局 参考 线 。 

导入 名 为 “状态 栏 . png” 的 图 像 , 将 其 放置 在 如 图 5-12 所 示 的 位 置 。 

按 Ctrl 十 A 键 ,选中 页 面 内 所 有 元 件 . 右 击 ,在 弹出 的 快捷 菜单 中 选择 “转换 为 
母 版 ”命令 ,如 图 5-13 所 示 , 此 时 会 弹出 “转换 为 母 版 对话 框 ,具体 设置 如 图 5-14 
所 示 , 单 击 “ 继 续 ” 按 钮 . 即 可 将 已 绘制 页 面 转换 为 母 版 。 

在 主 菜单 栏 中 执行 “视图 ”~ 遮 单 ”一 “ 母 版 命令 ,取消 母 版 遮 单 ,取消 母 版 庶 
罩 前 后 的 效果 如 图 5-15 和 图 5-16 所 示 。 

绘制 标签 栏 , 如 图 5-17 所 示 ,再 按照 Step5 的 方法 将 其 转换 为 母 版 。 
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5-10 ”绘制 导航 栏 


图 5-11 创建 全 局 参考 线 


图 5-12 导入 图 像 
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尖 勇 切 中 
国 复制 吕 
围 牛 凡 ) 
选择 性 粘贴 


设 为 隐藏 
国 组 合 @ Cen6 


顺序 加 ) 


转换 为 动态 面板 0) 


图 5-13 转换 为 母 版 


襄 转 换 为 母 版 | 


加 锁定 到 母 版 中 的 位 置 


从 写 版 脱 意 


图 5-14 “转换 为 母 版 "对 话 框 图 5-15 有 遮 罩 母 版 
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首页 订单 我 的 


图 5-16 无 遮 章 母 版 图 5-17 标签 栏 


Step8 ”根据 首页 的 功能 模块 继续 绘制 首页 的 低 保 真 原型 图 ,并 根据 功能 分 析 将 页 面 的 
功能 标注 出 来 ,最 终 效果 图 如 图 5-18 所 示 。 


: 

DD BY DD i i 
全 全 -全 S| 
: 

-上 


10 我 的 


图 5-18 首页 的 低 保 真 原型 图 及 功能 标注 
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Step9 ” 单 击 Home 页 面 ,将 其 命名 为 “首页 ”, 并 删除 其 余 页 面 ,如 图 5-19 所 示 。 至 此 ， 
首页 的 低 保 真 原型 图 制作 完成 。 


mm 号 四 QI 
口 首页 | 


图 5-19 页 面 重 命名 


5.2.2 积分 商城 功能 分 析 


洗刷 刷 App 的 积分 商城 可 以 增强 用 户 黏 性 ,用 户 在 消费 .充值 时 即 获 得 积分 。 根 据 积 
分 商城 的 结构 图 (图 5-20) 和 流程 图 可 以 得 知 该 页 面 的 主要 功能 以 及 与 其 相关 的 页 面 ( 其 低 
保 真 原型 图 详 见 本 案例 源 文件 )。 对 积分 商城 页 面 功能 具体 介绍 如 下 。 

。 搜索 框 : 积分 商城 页 面 提供 了 搜索 功能 ,用 户 可 以 快速 搜索 积分 商品 。 

。 商品 推广 Banner: 是 用 于 宣传 积分 活动 的 主要 区 域 ,用 户 可 以 在 此 查看 近期 的 活动 
信息 。 
积分 商品 分 类 : 积分 商品 共 分 为 优惠 礼券 和 超 值 礼品 两 类 。 为 了 方便 用 户 快 速 找 
到 自己 想 要 兑换 的 商品 , 故 在 积分 商品 分 类 下 设置 了 “优惠 礼券 * 超 值 礼品 "和 “所 
有 商品 ”3 个 按钮 ,点 击 按钮 即 可 进入 对 应 的 积分 商品 分 类 页 面 。 
快速 入 口 : 该 页 面 有 两 个 快速 入 口 ,分 别 是 “积分 ”和 “兑换 记录 ”。 在 该 页 面 中 ,可 
以 直接 查看 现 有 积分 , 当 用 户 点 击 “ 积 分 "时, 跳 转 至 积分 记录 ; 当 用 户 点 击 “ 兑 换 记 
录 ” 时 ,页 面 跳 转 至 积分 商城 订单 页 面 ,用 户 可 以 查看 所 有 的 积分 兑换 订单 。 
。 查看 商品 : 该 区 域 主要 放置 商家 推荐 的 产品 ,可 以 让 用 户 快速 了 解 积分 兑换 商品 。 

点 击 商品 时 ,页 面 会 跳 转 至 该 商品 的 详情 页 。 
搜索 框 

商品 推广 Banner 


优惠 礼 关 
入 商城 中 一 证 类 则 录 日 、 手 机 9 曲 录 
2 ee 
密 到 找 加 
图 5-20 积分 商城 结构 图 图 5-21 登录 /注册 结构 图 


5.2.3 登录 /注册 功能 分 析 


登录 和 注册 是 洗刷 刷 App 的 基本 功能 模块 ,根据 登录 和 注册 的 结构 图 (图 5-21) 和 如 
图 4-51 所 示 的 积分 商城 流程 图 可 以 了 解 这 两 个 页 面 中 包含 的 内 容 。 下 面 针 对 产品 的 登录 / 
注册 功能 进行 讲解 。 


1. 登录 
通常 情况 下 用 户 直接 输入 正确 的 账号 (手机 号 ) 和 密码 ,点击 “ 登 录 ? 按 钮 即 可 成 功 登录 。 
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除了 手机 号 登录 外 ,还 可 以 采取 第 三 方 登录 方式 ,例如 用 户 可 以 直接 使 用 微 信 、 微 博 等 第 三 
方 产品 登录 本 产品 ,使 用 第 三 方 登录 方式 的 好 处 有 两 个 : 一 是 可 以 让 用 户 只 用 一 个 账号 即 
可 登录 多 个 产品 , 免 去 了 每 次 登录 都 要 输入 账号 和 密码 的 麻烦 ;二 是 可 以 获得 用 户 的 第 三 方 
产品 的 信息 ,以 更 好 地 了 解 用 户 。 

注意 : 用 户 忘记 密码 的 事 时 常 发 生 , 所 以 不 要 忘记 在 登录 模块 添加 找 回 密码 功能 的 
p 


2. 注册 


用 户 只 有 通过 注册 提交 一 些 必要 的 信息 后 ,才能 使 用 产品 的 所 有 功能 。 注 册页 面 的 内 
容 一 般 包 括 手 机 号 .QQ 号 、 微 信号 、 邮 箱 甚至 身份 证 号 ,这 些 信 息 不 仅 是 用 户 的 个 人 账户 信 
息 ,而 且 和 产品 的 运营 需求 有 关 。 例 如 ,获得 了 用 户 的 邮箱 和 微 信 账号 ,就 可 以 通过 这 两 个 
渠道 与 用 户 建立 联系 ,向 用 户 推送 信息 。 本 案例 只 提供 了 手机 号 注册 入 口 。 

注意 : 虽然 获取 用 户 的 信息 越 多 ,与 用 户 联系 的 渠道 就 越 多 ,但 是 如 果 在 注册 模块 让 用 
户 填写 过 多 的 信息 ,反而 会 影响 用 户 体验 ,甚至 使 用 户 放弃 注册 。 因 此 ,在 设计 产品 时 ,要 把 
握 好 这 个 度 。 


5.3 产品 需求 文档 


产品 的 低 仿真 原型 图 产生 之 后 ,一 个 定义 清晰 、 功 能 逻辑 明确 和 体验 效果 具体 的 产品 已 
经 浮现 在 眼前 了 , 接 下 来 的 工作 就 是 汇总 前 期 的 成 果 , 按 一 定 的 形式 对 这 些 成 果 进 行 归纳 和 
说 明 ,形成 产品 需求 文档 ,这 个 文档 的 质量 直接 影响 到 研发 部 门 是 否 能 够 明确 产品 的 功能 和 
性 能 ,因此 学 会 撰写 产品 需求 文档 是 非常 重要 的 。 下 面 通过 洗刷 刷 APP 项 目 来 讲解 产品 需 
求 文档 的 撰写 方法 。 


1. 产品 需求 文档 概述 


产品 需求 文档 (Product Requirement Document,PRD) 是 对 于 产品 功能 的 详细 说 明 ,一 
般 包含 结构 图 、 流 程 图 、 页 面 说 明 、 交 互 说 明 等 。 产 品 需求 文档 主要 面向 项 目 经 理 、 设 计 、 开 
发 和 测试 人 员 ,其 目的 是 让 他 们 看 懂 产 品 的 具体 需求 。 


2. 产品 需求 文档 的 重要 性 


产品 需求 文档 的 重要 性 主要 表现 在 以 下 3 个 方面 : 

(1) 传达 产品 开发 需求 。 例 如 ,开发 人 员 通 过 产品 需求 文档 可 以 了 解 页 面 元 素 和 用 例 
规则 。 

(2) 保证 各 部 门 沟通 时 有 理 有 据 。 

(3) 使 产品 质量 控制 有 具体 标准 。 例 如 ,一 个 产品 从 前 期 调研 、 确 认 需 求 到 最 后 开发 上 
线 需要 经 历 多 次 版 本 和 迭代 ,如 果 没 有 产品 需求 文档 ,在 大 型 项 目 中 ,版 本 迭代 就 会 变 得 没有 
依据 可 循 , 也 不 能 让 员工 快速 熟悉 产品 ,所 以 一 份 完整 的 .专业 的 产品 需求 文档 对 整个 公司 
产品 的 发 展 是 至 关 重 要 的 。 
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阶段 案例 : 撰写 产品 需求 文档 


产品 需求 文档 的 形式 主要 有 Word 文档 和 Axure 原型 两 种 。 有 的 产品 经 理 习 惯用 
Word 撰写 产品 需求 文档 ,有 的 则 会 倾向 于 Axure 原型 。 本 案例 采用 Word 文档 形式 来 展 
示 洗 刷 刷 App 产品 需求 文档 的 目录 ,如 图 5-22 所 示 。 产 品 需求 文档 各 部 分 具体 内 容 如 下 。 


图 5-22 产品 需求 文档 的 目录 


(1) 版 本 记录 : 一 般 包 括 版 本 号 、 修 订 人 、 修 订 日 期 .修订 ,通常 采用 表格 的 形式 ,如 
表 5-2 所 示 。 
表 5-2 版 本 记录 
版 本 号 2 修订 日 期 修订 内 容 


对 这 4 项 的 具体 解释 如 下 : 

。 版 本 号 : 显示 当前 文档 是 第 几 个 版 本 。 

。 修订 人 : 显示 修订 人 的 姓名 。 

”修订 日 期 : 显示 修订 日 期 。 

。 修 订 内 容 : 显示 具体 修改 了 哪些 内 容 以 及 修改 的 原因 。 

(2) 产品 角色 : 主要 是 产品 的 用 户 角色 说 明 。 

(3) 产品 功能 性 需求 : 是 产品 需求 文档 的 核心 内 容 , 描 述 产品 包含 的 所 有 功能 ,可 以 结 
合 产品 的 结构 图 、 流 程 图 及 低 保 真 原 型 图 来 讲解 ,让 相关 人 员 知 道 产品 是 什么 、 包 含 哪 些 页 
面 、 页 面 如 何 跳 转 等 。 本 部 分 具体 包括 产品 结构 图 ,业务 流程 图 、 低 保 真 原型 图 及 说 明 , 以 及 
功能 的 优先 级 。 
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(4) 产品 非 功 能 性 需求 : 主要 解决 “如 何 使 这 个 系统 能 在 实际 环境 中 运行 ”的 问题 。 如 
果 没 有 考虑 非 功能 性 需求 ,那么 这 个 解决 方案 则 很 难 取得 实效 ,因为 用 户 可 能 难以 甚至 无 法 
使 用 系统 的 功能 。 非 功能 性 需求 一 般 包括 性 能 需求 .可 维护 性 需求 .可 靠 性 需求 .安全 性 需 
求 . 安 装 性 需求 等 ,具体 解释 如 下 : 

。 性 能 需求 : 包括 时 间 需 求 、 系 统 容量 要 求 等 。 例 如 ,系统 的 运行 情况 如 何 ? 系统 可 
以 达到 其 响应 时 间 目 标 吗 ? 应 用 程序 的 设计 是 否 符合 性 能 要 求 ? 

可 维护 性 需求 : 这 是 一 个 极其 重要 的 需求 ,如 果 开 发 人 员 、 管 理 员 和 操作 人 员 不 能 
够 解决 如 何 维护 应 用 程序 的 问题 , 则 它 在 首次 发 布 之 前 就 会 天 折 。 一 件 事情 往往 需 
要 执行 很 多 次 (例如 ,安装 许多 应 用 程序 ) ,那么 ,是 否 有 一 个 可 复制 的 部 署 流程 ? 是 
否 可 以 使 重复 的 任务 自动 化 ,使 之 在 大 范围 内 可 行 ? 

可 靠 性 需求 : 产品 在 特定 条 件 下 使 用 时 保持 规定 的 性 能 水 平 的 能 力 。 例 如 ,在 加 载 
时 ,或 者 在 系统 故障 时 ,系统 是 否 可 以 可 靠 运行 ? 实现 可 靠 性 是 否 会 对 性 能 造成 负 
面 影响 ? 

安全 性 需求 : 产品 在 特定 的 使 用 环境 中 抵御 风险 的 能 力 。 例 如 ,如 何 保护 系统 不 受 
攻击 ? 

。 安装 性 需求 : 产品 在 特定 环境 中 安装 和 印 载 的 性 能 。 

注意 : 不 是 所 有 的 产品 需求 文档 都 必须 有 这 些 内 容 , 对 于 不 同类 型 的 产品 ,可 以 添加 必 
要 的 内 容 或 者 删除 不 必要 的 内 容 。 


学 习 目标 

。 了 解 交 互 及 交互 设计 。 

。 了 解 Axure 交互 设计 基础 知识 。 

。 掌握 息 标 是 浮 和 单 击 效果 的 制作 技巧 。 

。 掌握 焦点 图 切换 效果 的 制作 技巧 。 

随 着 互联 网 的 快速 发 展 , 越 来 越 多 的 公司 需要 产品 设计 人 员 具 有 交互 设计 方面 的 知识 
和 交互 设计 能 力 , 因 此 掌握 交互 设计 相关 知识 变 得 越 来 越 重要 。 那 么 ,到 底 什么 是 交互 设 
计 ? 交互 设计 的 作用 又 是 什么 呢 ? 本 章 将 针对 交互 设计 及 其 相关 知识 进行 详细 讲解 。 


6.1 认识 交互 设计 


交互 设计 起 源 于 网 站 设计 和 图 形 设计 ,现在 已 经 成 为 一 个 独立 的 领域 。 交 互 设计 并 非 
文字 和 图 片 的 设计 ,而 是 设计 用 户 触摸 、 点 击 或 输入 时 与 系统 之 间 的 互动 。 要 了 解 交 互 设 
计 , 首 先 要 知道 什么 是 交互 。 本 节 对 交互 及 交互 设计 进行 讲解 。 


6.1.1 什么 是 交互 


交互 , 即 交 流 和 互动 。 例 如 , 当 人 和 男 一 个 人 或 者 一 个 事物 (如 机 器 、 系 统 、 环 境 等 ) 发 生 
双向 的 信息 交流 和 互动 时 ,就 是 一 种 交互 行为 。 但 要 注意 的 是 ,交流 和 互动 必须 是 双向 的 ， 
如 果 只 有 一 方 输出 信息 ,而 没有 另 一 方 的 参与 ,那么 只 是 信息 展示 而 不 是 交流 和 互动 。 简 单 
地 说 ,交互 就 是 一 方 输入 , 另 一 方 作出 反馈 。 图 6-1 所 示 的 报纸 是 单 向 的 信息 展示 ,只 能 让 
人 从 中 获取 信息 ,而 报纸 不 能 反 过 来 接收 信息 并 作出 反馈 ,所 以 不 是 交互 。 图 6-2 所 示 的 登 
录 界 面 会 根据 用 户 输入 的 内 容 作 出 正确 和 错误 的 反馈 ,有 信息 交流 和 互动 ,所 以 是 交互 。 


立 记 樟 自 
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6.1.2 交互 设计 概述 


交互 设计 是 对 交互 行为 的 外 在 表现 的 设计 。 交 互 设计 是 对 一 个 或 者 一 系列 交流 和 互动 
用 文字 、 图 像 或 文档 等 方式 从 内 容 方式 ,规则 等 维度 进行 设计 。 例 如 图 6-3 所 示 的 手机 指 
纹 解锁 功能 , 当 用 户 录 入 正确 的 指纹 时 ,手机 解锁 ,反之 则 会 提示 用 户 重新 录入 指纹 或 弹出 
输入 密码 界面 。 


图 6-3 手机 指纹 解锁 功能 


6.1.3 交互 设计 五 要 素 


交互 设计 五 要 素 指 的 是 媒介 ,场景 ,用 户 、 行 为 和 目的 。 例 如 ,对 于 图 6-4 所 示 的 衣服 图 片 
和 图 6-5 所 示 的 虚拟 试 衣 App, 前 者 只 展示 了 衣服 ,没有 用 户 \ 行 为 和 目的 ;而 后 者 包含 了 用 户 
( 试 衣服 的 人 ) ,媒介 ( 试 衣服 的 机 器 ) 场景 (商场 的 某 家 服装 店内 ) .行为 (用 户 的 点 击 ) 和 目的 
( 试 衣服 、 买 衣服 ) 等 ,是 一 个 典型 的 交互 设计 。 媒 介 和 场景 是 已 经 存在 的 背景 或 环境 ,设计 师 
重点 关注 的 应 该 是 用 户 ,行为 和 目的 这 3 个 要 素 。 下 面 对 交 互 设计 五 要 素 分 别 进行 讲解 。 


图 6-4 衣服 图 片 图 6-5 虚拟 试 衣 App 


(1) 媒介 。 可 以 理解 为 产品 形态 ,产品 无 论 是 实体 工具 、App、 网 页 、 公 众 号 、 微 信 小 程 
序 还 是 其 他 形式 ,都 属于 媒介 。 

(2) 场景 。 用 户 使 用 产品 时 所 处 的 环境 。 例 如 ,司机 为 了 安全 ,一 般 会 把 手机 固定 在 车 
载 架 上 ,这 个 就 是 滴 滴 出 行 司机 端 App 的 主要 场景 。 

(3) 用 户 。 使 用 产品 的 人 。 互 联网 产品 可 能 存在 很 多 种 用 户 ,一 定 要 以 目标 用 户 的 研究 
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为 主 。 例 如 , 某 健康 医疗 App 的 目标 用 户 为 患 有 慢性 疾病 的 中 老年 人 和 注重 健康 的 年 轻 人 。 
(4) 行为 。 用 户 在 特定 场景 下 利用 特定 媒介 为 了 完成 特定 目的 而 做 的 动作 ,如 点 击 、 滑 
动 . 输 入 等 。 
(5) 目的 。 用 户 想 要 达到 的 目标 ,也 可 以 说 是 产品 或 功能 的 目的 。 使 用 产品 时 ,不 同 用 
户 可 能 有 不 同 目标 ,一 个 用 户 也 有 可 能 有 多 个 目标 。 明 确 用 户 的 目标 之 后 ,交互 计 师 再 根据 
不 同 的 目标 设计 相应 的 行为 路 径 。 烦 琐 的 行为 路 径 会 导致 用 户 放弃 产 品 。 


6.1.4 交互 设计 原则 


了 解 交 互 设 计 原则 ,可 以 更 好 地 设计 产品 。 交 互 设计 原则 主要 有 可 视 原则 、 反 馈 原则 、 
一 致 原则 、 启 发 原则 ,文字 易 读 原 则 、 防 错 原则 、 易 取 原 则 等 ,下 面 对 交 互 的 设计 原则 进行 讲 
解 ,具体 如 下 。 


1. 可 视 原则 


功能 的 可 视 性 越 好 , 越 方 便 用 户 发 现 和 了 解 使 用 方法 。 例 如 ,进度 条 (如 图 6-6 所 示 ) 可 
以 让 用 户 知道 当前 进度 ,从 而 降低 用 户 的 焦虑 。 


2. 反馈 原则 


反馈 就 是 用 户 操作 时 系统 所 给 的 提示 信息 ,以 便 用 户 能 够 正确 地 继续 下 一 步 操作 。 例 
如 ,图 6-7 给 出 了 “当前 使 用 人 数 过 多 ,请 稍 后 再 试 " 的 提示 信息 。 


当前 使 用 人 数 过 多 ， 请 稍 后 再 试 


图 6-7 提示 信息 
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3. 一 致 原则 


保证 同一 系统 的 同一 功能 的 表现 及 操作 一 致 。 例 如 ,一 个 软件 点 赞 的 图 标 是 心 形 ,收藏 
的 图 标 是 星 形 ,那么 这 个 软件 所 有 的 点 赞 图 标 都 要 用 心 形 , 所 有 的 收藏 图 标 都 要 用 星 形 。 


4. 启发 原则 


启发 就 是 对 某 项 功能 准确 的 操作 提示 。 例 如 鼠标 悬 停 在 某 一 图 标 上 时 显示 解释 性 文字 
就 是 启发 ,如 图 6-8 所 示 。 


图 | 
二 于 
图 6-8 解释 性 文字 产品 的 一 切 表 述 都 应 该 尽 可 能 贴近 用 户 ( 年 龄 ,学历 、 文 


化 .时 代 背 景 )。 例 如 ,提示 ”account 参数 不 能 为 空 * 这 句 话 只 

有 程序 员 能 看 懂 , 而 “账号 不 能 为 空 ” 才 能 被 普通 用 户 理解 (详情 可 参考 6. 1.5 节 )。 

6. 防 错 原则 

对 于 比较 谨慎 的 操作 ,需要 弹出 一 个 提示 框 。 例 如 ,删除 后 不 可 恢复 ,您 确定 要 删除 该 
文件 吗 ?”。 

7. 易 取 原则 

尽 可 能 地 减少 用 户 的 回忆 或 操作 负担 。 例 如 ,用 户 进入 一 个 电 商 网 站 , 想 要 查找 某 一 商 
品 ,应 该 用 最 少 的 步骤 让 用 户 搜索 到 想 要 的 结果 。 
6.1.5 页 面 提 示 语 


互联 网 产品 一 般 有 两 种 反馈 机 制 。 一 种 是 通过 界面 跳 转 或 明显 的 界面 变动 进行 反馈 。 例 
如 ,点 击 “ 朋 友 圈 ?按钮 ,界面 即 跳 转 至 朋友 圈 界 面 ;再 如 ,点 击 歌曲 播放 按钮 ,歌曲 随即 播放 。 这 种 
反馈 机 制 一 般 不 需要 反馈 提示 。 另 一 种 是 当 某 些 特殊 情况 导致 界面 没有 响应 或 响应 很 慢 时 , 则 
需要 给 予 提示 , 若 此 时 界面 没有 任何 提示 , 则 用 户 不 确定 自己 的 操作 是 否 成 功 , 会 感到 困惑 。 
注册 过 程 中 常用 的 页 面 提示 语 如 表 6-1 所 示 。 


表 6-1 注册 过 程 中 常用 的 页 面 提示 语 


情 况 描述 提示 请 
手机 号 /密码 为 空 。 | 未 输入 手机 号 或 密码 手机 号 /密码 不 能 为 空 
手机 号 验证 错误 | 手机 号 输入 错误 或 已 被 注册 de he hi dla 

经 被 注册 
密码 少 于 6 位 输入 的 密码 少 于 6 位 密码 不 能 少 于 6 位 
验证 码 输入 错误 | 输入 正确 的 手机 号 .密码 和 错误 的 验证 码 ”| 验证 码 不 正确 ,请 重新 输入 
无 网 络 手机 未 接 人 移动 网 络 或 WiFi 当前 网 络 不 可 用 ,请 检查 网 络 
人 下 录 页 而 ,输入 正 确 的 手机 号 和 密码 ,点 击 | WA、 


“登录 ”按钮 
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注意 : 表 6-1 中 的 页 面 提示 语 并 不 是 固定 的 。 页 面 提示 语 也 有 不 同 的 表现 方式 ,如 图 
片 形 式 、 弹 窗 形式 等 。 只 要 表达 清楚 ,能 让 用 户 明 和 白 发 生 了 什么 事情 ,就 是 合格 的 提示 语 。 


6.2 Axure 交互 设计 基础 


使 用 Axure 可 以 快速 制作 带 有 交互 的 原型 图 ( 低 保 真 .高保 真 )。 在 Axure 中 创建 的 交 
互 主 要 包含 事件 .用例 动作 和 交互 样式 4 个 模块 ,本 节 对 这 4 个 模块 进行 讲解 。 


6.2.1 事件 


事件 是 可 以 被 控件 识别 的 操作 。 每 一 种 控件 都 有 自己 可 以 识别 的 事件 ,如 加 载 . 单 击 、 
双击 等 事件 ,在 Axure 中 ,交互 是 由 两 种 类 型 的 事件 触发 的 ,分 别 是 页 面 事件 和 元 件 事件 ， 
下 面 分 别 对 这 两 个 事件 进行 讲解 。 


1. 页 面 事件 


页 面 事件 是 可 以 自动 触发 的 ,如 加 载 页 面 时 。 若 页 面 编辑 区 中 无 任何 元 件 或 未 选中 任 
何 元 件 时 ,选择 检查 器 中 的 “属性 ”面板 , 即 可 添加 页 面 事件 ,如 图 6-9 所 示 。 下 面 对 页 面 事 
件 进行 讲解 。 

。 页面 载 和 时 ; 当 页 面 载 入 时 触发 。 

。 窗口 改变 大 小 时 : 当 浏 览 器 窗口 大 小 改变 时 触发 。 

。 窗口 滚动 时 : 当 浏 览 器 窗口 滚动 时 触发 。 

需要 注意 的 是 ,页 面 事件 不 止 这 3 个 , 若 需 要 添加 其 他 页 面 事件 ,可 在 “更 多 事件 ”下 拉 
列表 中 选择 相应 的 事件 ,如 图 6-10 所 示 。 


页 面 饼 标 单 二 时 

页 面 饼 标 双击 时 

页 面 饼 标 右键 单 主 对 
页 面 饼 标 移动 时 

页 面 键 盘 按 刍 按 下 时 
页 面 键 盘 按 键 松 开 时 
窗口 向 上 滚动 
窗口 向 下 滚动 

自 适 合 视图 变更 时 


图 6-10 页 面 事件 的 “更 多 事件 下拉 列 表 


2. 元 件 事件 


元 件 事件 是 指 与 页 面 中 的 元 件 直接 交互 。 在 页 面 编辑 区 中 选中 某 一 元 件 , 选 择 检查 器 
中 的 “属性 ?面板 , 即 可 添加 元 件 事件 ,如 图 6-11 所 示 ,这 些 事 件 直接 由 用 户 触 发 ,其 中 “鼠标 
单 击 时 ?就 是 最 基本 的 触发 事件 ,例如 用 户 点 击 “ 登 录 ? 按 钮 。 下 面 对 元 件 事 件 进行 讲解 。 

。 鼠标 单 击 时 : 当 元 件 被 单 击 时 触发 。 
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。 鼠标 移 人 时 : 当 鼠 标的 光标 移入 元 件 范围 内 时 触发 。 

。 鼠标 移出 时 : 当 鼠 标的 光标 移出 元 件 范围 时 触发 。 

需要 注意 的 是 ,元 件 事件 不 止 这 3 个 ,车 需要 添加 其 他 元 件 事件 时 ,可 以 在 “更 多 事件 ” 
下 拉 列 表 中 选择 相应 的 事件 ,如 图 6-12 所 示 。 


E33 
( 息 形 各 动 
EE “= 
v 2 
十 新 漠 用 例 。。 剖 于 渤 控 
7 记 标 单 击 时 
中标 称 入 时 
中 标 稳 出 时 


更 多 事件 


图 6-11 元 件 事件 图 6-12 元 件 事件 的 “更 多 事件 "下 拉 列 表 


6.2.2 用 例 

用 例 是 多 个 动作 的 组 合 。 选 中 元 件 ,双击 “属性 ”面板 中 的 某 一 事件 ,或 单 击 + 新 增 用 例 
按钮 , 即 可 新 增 一 个 用 例 ,并 弹出 “用 例 编辑 器 "对话 框 ,如 图 6-13 所 示 。 

选择 事件 之 后 ,需要 对 该 事件 进行 新 增 动作 、 组 织 动作 、 配 置 动 作 的 设置 .在 配置 动作 区 
设置 的 动作 可 在 组 织 动作 区 显示 ,在 组 织 动 作 区 可 以 对 动作 进行 复制 .粘贴 和 删除 等 操作 。 
6.2.3 动作 

动作 是 由 用 例 定义 的 对 事件 的 响应 。 图 6-13 的 动作 区 内 所 示 的 选项 即 为 动作 。 例 如 ， 
点 击 一 个 元 件 滚 动 到 另 一 个 元 件 , 这 个 用 例 的 动作 就 是 “滚动 到 元 件 ”( 锚 点 链接 ) 。 在 
Axure 中 ,动作 主要 包括 “链接 元件“ 变量 “中 继 器 "和 “杂项 ”5 组 ,初学 者 掌握 “链接 ”组 
和 “元 件 " 组 中 的 简单 动作 即 可 。 下 面 对 “ 链 接 " 组 和 “元 件 ”" 组 中 的 常用 动作 进行 解释 。 

1.“ 链 接 " 组 


“链接 ”组 中 的 动作 是 针对 页 面 的 动作 。 常 用 动作 有 打开 链接 .关闭 窗口 、 滚 动 到 元 件 
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用 例 缩短 必 ( 民 标 单 击 时 ) 


动作 区 组 织 动作 区 配置 动作 区 
图 6-13 “用 例 编辑 器 "对话 框 


( 锚 点 链接 ) 等 ,具体 解释 如 下 。 

(1) 打开 链接 : 触发 元 件 时 可 以 设置 在 4 个 窗口 打开 链接 ,分 别 是 当前 窗口 .新 窗口 / 标 
签 页 ,弹出 窗口 和 父 窗口 ,其 中 ,最 常用 的 动作 是 在 当前 窗口 和 新 窗口 /标签 页 打开 链接 。 

。 当前 窗口 : 在 当前 窗口 打开 页 面 或 外 部 链接 。 

。 新 窗口 /标签 页 : 在 新 窗口 /标签 页 打开 页 面 或 外 部 链接 。 

(2) 关闭 窗口 : 触发 元 件 时 关闭 当前 窗口 ,需要 注意 的 是 ,关闭 当前 窗口 动作 只 能 关闭 
从 页 面 打开 的 窗口 ,而 不 能 关闭 从 另 一 个 窗口 打开 的 窗口 。 

(3) 滚动 到 元 件 ( 锚 点 链接 ) : 触发 元 件 时 ,页 面 滚动 到 元 件 位 置 。 

2.“ 元 件 " 组 

“元 件 " 组 主要 用 于 设置 某 个 元 件 的 动作 ,如 显示 元 件 、 设 置 文本 ,设置 图 片 等 ,具体 解释 
如 下 。 

(1) 显示 /隐藏 : 分 别 用 于 将 隐藏 的 元 件 设置 为 显示 (可 见 ) 以 及 将 显示 的 元 件 设置 为 
隐藏 (不 可 见 ) 。 

(2) 设置 面板 状态 : 用 于 设置 动态 面板 元 件 的 状态 ( 详 见 6. 3 节 )， 

(3) 设置 文本 : 当 触 发 元 件 时 ,改变 元 件 上 的 文字 。 

(4) 设置 图 片 : 当 触发 元 件 时 ,改变 图 片 。 

(5) 选中 : 设置 元 件 为 选中 状态 。 需 要 注意 的 是 ,在 设计 元 件 为 选中 状态 的 交互 之 前 ， 
首先 要 在 交互 样式 中 设置 元 件 的 选中 状态 ( 详 见 6. 2.4 节 )。 

(6) 启用 /禁用 : 分 别 用 于 设置 元 件 为 可 用 的 、 可 选择 的 以 及 设置 元 件 为 不 可 用 的 、 不 
可 选择 的 。 
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(7) 移动 : 移动 元 件 到 特定 的 坐标 。 
(8) 设置 不 透明 度 : 设置 元 件 的 不 透明 度 。 
注意 : 一 个 事件 可 以 有 多 个 用 例 ,一 个 用 例 也 可 以 有 多 个 动作 ,三 者 的 关系 如 图 6-14 
所 示 。 
4 Beia | 事件 
[45 Bm! | 用 例 
在 当前 窗口 打开 Page 1 
多 设 村 元 H 文 字 当 病 元 件 = 一 
4 所 用 例 2 


区 maorirees]| 一 一 动作 
图 6-14 事件 .用例 和 动作 的 关系 


6.2.4 交互 样式 


交互 样式 用 于 设置 当 用 户 与 元 件 交互 时 元 件 自身 的 样式 变化 。Axure 提供 了 4 种 交互 
样式 ,选中 一 个 元 件 后 ,选择 检查 器 的 “属性 ”面板 , 即 可 设置 交互 样式 ,如 图 6-15 所 示 。 当 
选择 其 中 一 种 交互 样式 时 ,会 弹出 如 图 6-16 所 示 的 “交互 样式 ”对 话 框 。 需 要 注意 的 是 , 设 
午 * 选 中 >” 和 ”禁用 ?交互 样式 后 ,必须 为 其 添加 相应 的 用 例 , 交 互 样式 的 效果 才 会 显现 出 来 。 


[ 自 | 
图 6-15 交互 样式 图 6-16 “交互 样式 ”对 话 框 
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例如 ,设计 一 个 交互 , 当 用 户 点 击 一 个 椭圆 元 件 时 ,该 椭圆 元 件 的 状态 变 为 “禁用 ”。 首 
先 , 需 要 在 “交互 样式 ”对 话 框 中 设置 椭圆 元 件 的 “禁用 ”交互 样式 ;其 次 ,新 增 用 例 ,在 “用 例 
编辑 器 "对话 框 中 选择 “禁用 ”选项 ,选择 “椭圆 ”元件 即 可 。 


阶段 案例 : 鼠标 悬 停 . 单 击 效果 制作 
本 案例 通过 制作 一 个 Web 端 App 导航 栏 鼠标 悬 停 , 单 击 效果 来 演示 Axure 交互 设计 
的 基本 操作 。 
1. 鼠标 悬 停 效果 


设置 鼠标 悬 停 效 果 可 以 提升 用 户 体验 。 常 见 的 网 站 导航 链接、 按钮 等 都 有 鼠标 悬 停 效 
果 。 图 6-17 和 图 6-18 为 未 设置 鼠标 悬 停 效 果 和 已 设置 鼠标 悬 停 效 果 的 导航 栏 。 


精品 课程 视频 课程 在 线 学 习 关于 我 们 


图 6-17 ”未 设置 悬 停 效 果 的 导航 栏 


精品 课程 视频 课程 线 学 习 关于 我 们 


图 6-18 已 设置 悬 停 效 果 的 导航 栏 


具体 操作 步骤 如 下 。 
Stepl 打开 * 船 客 . rp” 文 件 ,如 图 6-19 所 示 。 


精品 课程 视频 课程 系 创 书籍 在 线 学 关于 我 们 


图 6-19 “ 船 客 . rp" 文 件 


Step2 ”选中 页 面 编辑 区 的 文字 元 件 ,如 图 6-20 所 示 。 


汪 训 了 六 大 所 放 。” 注 抽 愉 二 ESE 


图 6-20 选中 文字 元 件 


Step3 ”在 “属性 ”面板 中 单 击 “ 和 鼠标 基 停 时 "交互 样式 ,在 弹出 的 “交互 样式 ”对 话 框 中 设 
置 参 数 , 即 图 6-21 中 用 方 框 标示 的 3 处 。 

Step4 按 Ctrl+S 键 ,在 弹出 的 “另存 为 ?对话 框 中 单 击 * 确 定 ” 按 钮 以 保存 文件 。 至 此 ， 
鼠标 悬 停 效 果 制 作 完成 。 单 击 贺 ( 预 览 ) 按 钮 , 即 可 在 浏览 器 中 预览 原型 效果 。 


2. 鼠标 单 击 效果 


鼠标 单 击 元 件 时 可 以 执行 关闭 窗口 、 打 开 链 接 、 设 置 文本 /图 片 、 选 中 /未 选中 等 动作 。 
下 面 以 登录 界面 和 手机 标签 栏 为 例 , 讲 解 页 面 跳 转 及 选中 效果 的 制作 方法 。 

1) 页 面 跳 转 效果 

页 面 跳 转 是 一 种 常见 的 交互 。 例 如 ,在 如 图 6-22 所 示 的 登录 界面 中 , 当 用 户 单 击 “ 登 
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录 " 按 钮 时 ,会 跳 转 至 另 一 页 面 。 制 作 页 面 跳 转 效果 的 具体 操作 步骤 如 下 : 


加 sn) 


| 国 [s 3 


登录 界面 


请 输入 几 号 


请 输入 6 位 数 的 宅 码 | 


图 6-21 “交互 样式 "对话 框 图 6-22 登录 界面 


Stepl 打开 “登录 . rp" 文件 ,选中 按钮 元 件 , 在 检查 器 的 “属性 ”面板 中 双击 “鼠标 单 击 
时 ”事件 ,如 图 6-23 所 示 , 即 可 弹出 * 用 例 编辑 器 ”对话 框 ,如 图 6-24 所 示 。 


图 6-23 “登录 ”按钮 的 “鼠标 单 击 时 ”事件 


Step2 单 击 “打开 和 链接 ”动作 ,在 配置 动作 区 的 “打开 在 "下拉 列表 中 选择 “当前 窗口 ” 
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用 本 名称 | 81 


第 一 步 : 点 击 新 并 动人 等 三 步 : 组 织 动作 


PE gpPET 
多 在 i 宣 D 打 开 二 


二 用 合租 于 (请 标 单 击 时 | 


| Fs 


了 锋 接 到 外 部 URL 或 本 地 文件 如 : epopLavi 
直入 过 

了 重头 h 壮 当前 页 面 (对 变量 的 蛋 改 插 起 作用 ) 

了] 返回 前 一 页 ( 对 计量 的 修改 村 不 所 作用 ) 


所 内 mn | 


图 6-24 “用 例 编辑 器 ”对 话 框 


Step3 ”在 “链接 到 当前 设计 的 一 个 页 面 " 单 选 按 钮 下 方 选择 “首页 ”, 单 击 “ 确 定 ” 按 钮 ， 


设置 完成 ,如 图 6-25 所 示 。 


划 | 
Wi 1 人 
第 二 步 : 点 二 新 增 动作 篇 三 步 : 组 可 动作 第 巴 步 : 配置 动 f 
2 避 | 5 mo1 poe] 
机 
re En 到 得 tt 的 一 1 责 面 
Pe 
WE a 
a PE 直 了 
sn | 
亲口 目 口 Paese2 
4 ET D pae3 
BEE 
RR 
二 
和 
24 5 
4 三 示 降 殊 
时 
sm 
tpg O 〇 久 扫 部 URL 可 本地 文人 如 : elooocayl 
设 汰 面板 状态 
8 赴 链 朗 兰 页 Jaml 
设 土 县 像 〇 重 苦 b0 凌 当前 页 面 ( 对 变 县 的 修改 将 起 作用 ) 
es 口 肖 E 轴 一 页 (对 89S 检 不 刀 作 用 ) 
[ee mE 


图 6-25 ”链接 到 首页 


Step4 按 Ctrl+S 组 合 键 , 在 弹出 的 “另存 为 ”对话 框 中 单 击 "确定 ”按钮 保存 文件 。 至 此 ， 
页 面 跳 转 效果 制作 完成 。 单 击 吏 (预览 ) 按 钮 , 即 可 在 浏览 器 中 预览 原型 效果 。 


2) 选中 效果 


在 移动 端 产品 中 我 们 经 常会 观察 到 标签 栏 内 图 标 及 文字 的 颜色 变化 。 例 如 , 当 用 户 选 
中 * 首 页 ”时 “首页 ”的 图 标 及 文字 颜色 会 发 生 改 变 ; 当 选中 “快速 打 车 "时 ,快速 打车 ”的 图 
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标 及 文字 颜色 会 发 生变 化 且 * 首 页 ”的 图 标 及 文字 颜色 恢复 正常 ,如 图 6-26 和 图 6-27 所 示 。 
名 


快速 打车 


图 6-26 “首页 "图 标 及 文字 颜色 改变 


附近 车 辆 


图 6-27 “首页 ”图标 及 文字 颜色 恢复 正常 


具体 操作 步骤 如 下 。 

Stepl 打开 “标签 栏 . rp” 文 件 ,如 图 6-28 所 示 。 
[po) [一 
首页 快速 打车 附近 车 辆 


图 6-28 “标签 栏 . rp” 文件 


Step2 在 页 面 编辑 区 内 选中 Icon 元 件 ,如 图 6-29 所 示 。 在 检查 器 的 “属性 ”面板 中 , 单 
击 “ 选 中 ”交互 样式 ,弹出 如 图 6-30 所 示 的 “交互 样式 ”对 话 框 。 


Qa 


国 


图 6-30 “交互 样式 ”对 话 框 
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Step3 在 图 6-30 所 示 的 对 话 框 中 勾 选 “ 填 充 颜色 ” 复 选 框 , 并 设置 颜色 值 为 
井 FFCC00, 如 图 6-31 所 示 。 单 击 “ 交 互 样式 ”对 话 框 的 “确定 ”按钮 ,完成 交互 
样式 设置 。 


| 
四 2 lm | 四 [本 


四 不 (%) 


页 面 


是 近 渤 径 的 
[ee 
目 ” 主 且 且 目 面 国 百 国 本 三 生硬 国 国 


图 6-31 设置 填充 颜色 


Step4 选中 图 标 下 方 的 文字 ,如 图 6-32 所 示 。 按 照 Step2 和 Step3 的 方法 ,将 选中 的 
文字 颜色 值 设置 为 # FFCC00。 


全 


匀速 打 喜 


图 6-32 选中 文字 元 件 


Step5 ”在 页 面 编 辑 区 内 选中 命名 为 “首页 图 标的 元 件 , 在 检查 器 的 “属性 ”面板 中 , 双 
击 “ 鼠 标 单 击 时 ”事件 ,新 增 用 例 ,弹出 “用 例 编辑 器 "对话 框 ,如 图 6-33 所 示 。 


第 二 步 : 点 十 新 增 动 作 第 三 步 : 担 织 动作 第 四 步 : 配置 动作 


[EL 和 


图 6-33 “用 例 编辑 器 ”对 话 框 
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Step6 ”在 动作 区 选择 “元 件 ”>“ 设 置 选 择 / 选 中 ”>“ 选 中 ”选项 ,将 “首页 图 标 ”" 和 “首页 
文字 ”的 选中 状态 值 设置 为 * 真 ”", 将 其 余 元 件 的 选中 状态 值 设置 为 “ 假 ”, 如 
图 6-34 所 示 。 


第 三 步 : 组 织 动作 
4 吉 用 例 1 


多 设 各 运 中 重症 页 广 字 = 套 . 旦 
运 中 状 志 值 首页 至 标 = 去 且 


加 和 总 未 命名 的 


图 6-34 设置 各 个 选中 状态 


Step7 ”按照 Step5 和 Step6 的 方法 ,将 “快速 打车 ”和 “附近 车 辆 ”的 图 标 及 文字 的 交互 
状态 设置 完成 , 按 Ctrl 十 S 组 合 键 保存 文件 。 单 击 国 (预览 ) 按 钮 , 即 可 在 浏览 
器 中 预览 原型 效果 。 


6.3 动态 面板 


动态 面板 是 Axure 原型 制作 中 使 用 非常 频繁 的 一 个 元 件 , 它 可 以 包含 一 个 或 多 个 状 
态 , 每 个 状态 就 是 一 个 页 面 .可 以 任意 编辑 ,通过 控制 状态 的 切换 或 显示 /隐藏 来 实现 一 些 常 
见 的 交互 效果 ,例如 焦点 图 切换 、 手 机 解锁 、 显 示 进 度 条 等 ,那么 如 何 使 用 动态 面板 才能 实现 
这 些 效 果 ? 本 节 针 对 动态 面板 的 相关 知识 进行 讲解 。 


6.3.1 动态 面板 的 创建 方式 


动态 面板 有 两 种 创建 方式 : 其 一 是 直接 从 * 库 ?面板 中 拖 电 * 动 态 面板 ”元 件 至 页 面 编辑 
区 ;其 二 是 将 普通 元 件 转换 为 动态 面板 。 下 面 分 别 对 这 两 种 方法 的 使 用 进行 讲解 。 
2 1. 从 “ 库 ” 面 板 中 拖 息 “动态 面板 ”元件 至 页 面 编辑 区 
动态 面板 
图 6-35 “动态 面 在 “ 库 ” 面 板 中 ,找到 “动态 面板 "元件 ,如 图 6-35 所 示 , 将 其 拖 忠 至 
板 "元 件 ”页 面 编辑 区 ,双击 该 元 件 . 即 可 对 它 进行 编辑 。 
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2. 将 其 他 元 件 转换 为 动态 面板 


将 任 一 元 件 拖 忠 至 页 面 编 辑 区 , 右 击 该 元 件 , 在 弹出 的 快捷 菜单 中 选择 “转换 为 动态 面 
板 ” 命 令 , 即 可 将 其 他 元 件 转 换 为 动态 面板 ,如 图 6-36 所 示 。 


怠 0o | 


转 组 合 @) CtrlG 


图 6-36 将 其 他 元 件 转换 为 动态 面板 


6.3.2 动态 面板 的 使 用 

动态 面板 是 分 层 的 , 相 邻 两 层 之 间 的 关系 是 父子 关系 , 层 层 包 庄 , 每 一 层 都 是 动态 面板 
的 一 种 状态 ,每 一 种 状态 有 独立 的 显示 内 容 , 用 户 所 看 到 的 动态 效果 实际 上 就 是 动态 面板 切 
换 它 的 状态 。 下 面 对 动态 面板 的 具体 使 用 方法 进行 讲解 。 


1. 动态 面板 的 状态 


双击 页 面 编辑 区 中 的 “动态 面板 元件, 即 可 打开 “动态 面板 状态 管理 ”对 话 框 ,如 图 6-37 
所 示 。 在 “动态 面板 状态 管理 ”对 话 框 中 选中 一 个 状态 后 , 单 击 即 (编辑 状态 ) 按 钮 进入 动态 面 
板 的 编辑 区 ,如 图 6-38 所 示 , 在 这 里 可 以 对 动态 面板 的 状态 进行 编辑 。 


单 击 输入 动态 面板 名 称 
状态 位 置 调整 编辑 状态 和 
新 增 状态 es 四 状态 
复制 状态 
[名 状态 


图 6-37 “动态 面板 状态 管理 "对话 框 


注意 : 图 6-38 中 ,虚线 框 以 内 的 区 域 为 动态 面板 的 编辑 区 ,超出 虚线 框 范围 的 内 容 将 
不 被 显示 。 
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图 6-38 动态 面板 编辑 区 
2. 动态 面板 的 交互 


动态 面板 的 交互 和 其 他 元 件 的 交互 不 一 样 ,动态 面板 不 能 设置 交互 样式 ,但 增加 了 更 多 的 
交互 事件 。 图 6-39 和 图 6-40 分 别 是 普通 元 件 ( 以 矩形 元 件 为 例 ) 和 动态 面板 的 交互 事件 。 在 
“属性 ?面板 中 可 以 设置 动态 面板 的 滚动 栏 ` 位 置 (固定 到 浏览 器 ) 等 ,如 图 6-41 和 图 6-42 所 示 。 
通过 动态 面板 可 以 制作 焦点 图 切换 效果 ,手指 /鼠标 滑动 效果 ,标签 栏 切换 效果 等 。 


图 6-39 矩形 元 件 的 交互 事件 


E 
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开 检查 器 动态 于 析 
( 动 夺 面 放 各 移 


图 6-40 动态 面板 元 件 的 交互 事件 


名 固定 到 浏览 器 xl 
国定 面板 到 浏览 训 , 不 管 如 何 滚动 均 保持 在 相同 的 位 置 该 
效果 只 适用 于 浏览 血 
后 国定 到 浏览 回 窗 口 

横向 国定 


图 6-41 滚动 栏 设置 
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阶段 案例 : 焦点 图 切换 


接 下 来 通过 一 个 案例 对 动态 面板 的 使 用 进行 演示 。 
1. 案例 分 析 


在 制作 焦点 图 切换 效果 之 前 ,首先 要 进行 思路 剖析 。 通 过 思路 剖析 可 以 明确 制作 流程 ， 
避免 重复 性 的 工作 , 极 大 地 提高 工作 效率 。 


1) 尺寸 规范 
本 实例 按照 iPhone 6 的 尺寸 规范 制作 焦点 图 切换 效果 ,宽度 为 375 像素 ,高 度 为 178 像素 。 
2) 准备 素材 


选择 素材 图 片 ,并 将 素材 图 片 裁剪 成 375 像素 X178 像素 大 小 ,如 图 6-43 至 图 6-45 所 示 。 


图 6-43 素材 图 片 1 


图 6-45 素材 图 片 3 


第 6 章 交互 设计 


3) 分 解 流程 

焦点 图 是 一 个 常见 的 交互 效果 ,无 论 是 App 还 是 网 页 ,基本 都 会 有 焦点 图 切换 效果 ,一 
般 包括 自动 切换 .手动 切换 以 及 手动 切换 后 转 为 自动 切换 的 效果 。 

焦点 图 自动 切换 是 指 不 需要 任何 触发 , 当 页 面 载 人 时 动态 面板 自动 切换 状态 的 效果 ; 手 
动 切换 是 指 有 触发 事件 后 动态 面板 切换 状态 的 效果 ;手动 切换 后 转 为 自动 切换 就 是 将 两 者 
结合 的 状态 切换 效果 。 在 制作 第 三 种 效果 之 前 ,要 先 分 别 制作 手动 切换 效果 和 自动 切换 
效果 。 


2. 实现 步骤 


1) 手动 切换 焦点 图 
Stepl ”将 动态 面板 元 件 拖 忠 至 页 面 编辑 区 ,将 宽 和 高 分 别 设置 为 375 像素 和 178 像 
素 , 如 图 6-46 所 示 。 


9 0 o 


o o o 


图 6-46 设置 动态 面板 元 件 大 小 


Step2 ”双击 页 面 编辑 区 内 的 动态 面板 元 件 ,在 “动态 面板 状态 管理 ”对 话 框 中 ,输入 动 
态 面板 名 称 , 如 图 6-47 所 示 。 


图 6-47 输入 动态 面板 名 称 


Step3 ”双击 “状态 1”, 进 入 动态 面板 编辑 区 , 拖 入 图 片 元 件 ,将 其 大 小 调整 至 与 动态 面 
板 相 同 ,如 图 6-48 所 示 。 
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图 6-48 拖 入 图 片 元 件 


Step4 ”双击 图 片 元 件 , 将 名 为 1. jpg 的 图 片 导入 ,如 图 6-49 所 示 。 


图 6-49 导入 1.jpg 
Step5” 回 到 Home 页 面 ,在 页 面 编辑 区 中 双击 动态 面板 元 件 , 在 弹出 的 “动态 面板 状态 


管理 ”对 话 框 中 ,选中 “状态 1”, 两 次 单 击 听 (复制 ) 按 钮 ,得 到 “状态 2”"? 和 “状态 
3”, 如 图 6-50 所 示 。 


吉 动态 面板 状态 管理 | 
动态 面板 全 称 [ 蘑 A | 


图 6-50 复制 “状态 1” 得 到 “状态 2” 和 “状态 3” 


Step6 ”按照 Step3 和 Step4 的 方法 ,分 别 将 图 片 2.jpg 和 3. jpg 导入 “状态 2”? 和 “状态 3” 中 。 

Step7 回 到 Home 页 面 ,从 “ 库 ” 面 板 中 将 两 个 箭头 元 件 拖 忠 至 页 面 编 辑 区 ,选中 两 个 
箭头 元 件 ,在 “样式 ”面板 中 调整 大 小 为 16 像素 X28 像素 ,将 填充 颜色 值 设置 为 
井 FFFFFF ,将 不 透明 度 设 置 为 50% ,效果 如 图 6-51 所 示 。 


图 6-51 添加 箭头 元 件 


Step8 ”将 箭头 元 件 的 “鼠标 悬 停 时 ”交互 样式 的 不 透明 度 设置 为 100% ,如 图 6-52 
所 示 。 


国 不 和 中 度 (%) 100 


外 有 影 


图 6-52 设置 箭头 元 件 * 鼠 标 悬 停 时 ”交互 样式 


Step9 拖 电 椭圆 元 件 至 页 面 编辑 区 ,将 元 件 大 小 设置 为 12 像素 X12 像素 ,在 “样式 ” 面 
板 中 设置 边框 线条 颜色 为 “无 ”, 将 填充 颜色 值 设置 为 # F2F2F2, 摆 放 位 置 如 
图 6-53 所 示 。 
Step10 ”选择 页 面 编 辑 区 的 椭圆 元 件 , 右 击 椭圆 元 件 ,在 弹出 的 快捷 菜单 中 选择 “转换 为 
动态 面板 ”命令 ,如 图 6-54 所 示 , 在 “检查 器 "面板 中 将 该 动态 面板 命名 为 “点 ”。 
Stepl1 ”双击 椭圆 动态 面板 ,在 弹出 的 “动态 面板 状态 管理 ”对 话 框 中 ,双击 “状态 1”, 打 
开动 态 面板 编辑 区 ,将 第 一 个 椭圆 元 件 的 填充 颜色 值 设置 为 # FFCC00, 效 果 
如 图 6-55 所 示 。 
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$A50.51100 72 


考生 本 
ER 


图 6-54 将 椭圆 元 件 转换 为 动态 面板 图 6-55 设置 元 件 颜色 


Step12 ”按照 Step05 和 Step11 的 方法 ,分 别 将 “状态 2” 中 的 第 二 个 椭圆 元 件 和 “状态 
3” 中 的 第 三 个 椭圆 元 件 的 填充 颜色 值 设置 为 # FFCC00。 

Step13 ”选中 向 右 箭 头 , 在 “属性 ”面板 中 ,双击 “鼠标 单 击 时 ”事件 ,在 弹出 的 “用 例 编辑 
器 ”对话 框 中 选择 “设置 面板 状态 ”选项 ,在 配置 动作 区 设置 交互 动作 ,具体 设 
置 如 图 6-56 和 图 6-57 所 示 。 单 击 “ 确 定 ” 按 钮 完成 设置 。 


襄 用 例 编 回回 ( 尺 标 单 十 时 ) 对 
新 增 条件 
第 三 沙 : 组 织 动 作 菇 四 步 : 配置 动作 
GNPET 运 反 要 设置 状态 的 动态 面板 
多 设 昌 各 到 下 -个 和 aw 3 世态 的 
EECEEETEETG 
EE 
远 和 类 术 | 下 一 个 
ge 后 从 最 后 一 个 到 医 一 个 生动 入 环 
Rm 加 在 环 间隔 2000 完 尹 
JR 可 M 竹 进入 时 动画 ”| 无 
2 运动 面 。 | 无 
设 吾 可 您 后 时 于 而 板 (如 竺 隆 或) 
4 REEAE 中 i 看 情 下 收 起 元 件 


LW | MN 


图 6-56 为 向 右 箭头 设置 点 的 交互 动作 
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韦 用 例 编辑 亚 ( 良 标 单 击 时 ) | 


用 WE 称 [BW1 E27 
第 一 步 : 点 二 新 增 动 作 第 = 少 : atR 动 人 等 四 步 : 本 本 动作 
PE IPE 迁 振 要 设置 关 志 的 动态 古板 
4 打开 氏 榨 多 认 枉 集 # 加 到 下 一 个 月 二 3 动 out S00ms 过 反 0 
i 同 左 和 动 n SI0ms 生动 大 环 四 Re 的 
点 到 下 一 个 生动 本 环 同 认可 点 动态 面板 羡 志 到 下 一 个 生动 大 下 
CE EE 
璋 此 齐 吕 
Ee J 
关口 四 
4 Ei 
ER 
IE 
汪 动 到 元 全 上 全 接 ) 
让 适 机 量 
4 入 js 志 | 下 -个 
“ 本 周 从 最 后 一 个 到 入 一 个 生动 生还 
2 


RA 2000 这 风 
进入 时 动画 。 | 向 大 和 动 ”| 用 时 [500 
jadan 画 。 | 向 丰满 动 ”| 用 时 [500 


图 6-57 为 向 右 箭头 设置 焦点 图 的 交互 动作 


Step14 按照 Step13 的 方法 设置 向 左 箭头 的 交互 动作 ,具体 设置 如 图 6-58 和 图 6-59 
所 示 。 单 击 “ 确 定 ” 按 钮 完成 设置 。 


闪 用 例 编辑 加 (入 标 单 击 时) 划 | 
用 全 名 称 | 再 9 人 
第 二 步 : 点 二 新 增 动作 备 三 沙 : 恕 织 动作 粤 四 沙 : 配 二 动作 
4 NPEY 远近 要 没 轩 状 太 的 动态 草 板 
4 打开 斌 拉 多 设 量 点 到 上 一 个 昌 汉 环 E73 思 于 大 的 


Er 问 并 迪克 要 上 帮 到 上 一 个 于 


新 秦 口 标 答 页 EE 
弹出 窗口 


父 窗口 
郑 窗 口 
4 在 内 部 柱 蘑 打开 链 安 
内 部 框架 
女 框 转 
语 动 到 元 件 (全 点 作 接 ) 
设置 自 适应 视 国 
4 夫 运 反 状态 | 上 一个 
后 从 备 一 人 到 最 后 一 个 生生 环 
局 逢 二 2000 这 从 


进 和 时 动画 | 无 ”| 用 时 500 
远 出 时 动画 无 了 | 用 时 500 


图 6-58 为 向 左 箭头 设置 点 的 交互 动作 


Step1l5 按 Ctrl 十 S 组 合 键 , 在 弹出 的 “另存 为 "对 话 框 中 输入 文件 名 称 , 如 图 6-60 所 
示 。 单 击 * 确 定 "按钮 。 至 此 ,手动 切换 焦点 图 的 交互 动作 制作 完成 。 单 击 贺 
(预览 ) 按 钮 , 即 可 在 浏览 器 中 预览 原型 效果 。 


: 
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下 用 例 编辑 口 “( 家 标 单 击 时 ) | 


用 人 名称 | 届 吧 1 攻 


等 一步 : 二 新 入 动人 第 = 沙 : 乱 织 动作 和 :本 动作 
J 9 [4 ma 远近 要 设置 状态 的 动态 面板 
4 打开 到 六 多 | 国 本 可 林 全 的 
当前 窗口 疝 在 滑动 500ms 自 
a 同 点 (S 才 王 板 ) 
ee 同方 上 加 二 二 大 | 庆 杰 到 上 一 个 启动 out S00ms 月 
弹出 窗口 
人 窗口 
闸口 
2 En 
内 部 框 委 
ER 
溧 动 到 元 件 ( 往 点 名 楼 ) 
设 喇 店 适 应 视图 
4 元件 迁 择 状态 | 上 一 个 
后 从 项 一 人 到 地 后 个 中 动量 环 
FA 2000 。 这 录 
向 大 动 ”| 用: |500 
用 丰盈 -| 用 时 |500 


6-59 ”为 向 左 箭头 设置 焦点 图 的 交互 动作 


本 〇 -人 本- 刘 -二 -加 Er 7 
组 织 ”新 建文 件 夫 卫 ~ 
到 最 近 访问 的 位 置 人 | 老 称 = | 人 1 | 者 


局 应 | 没有 与 搜索 条 件 DO 页 。 


Sh me | 划 
文件 名 如 : 帮 动 订 台 集 
Od 


[el ely 
4 


~ 隐 本 文件 夫 | 


图 6-60 保存 文件 


2) 自动 切换 焦点 图 

Stepl 打开 “手动 切换 焦点 图 . rp” 文 件 ,如 图 6-61 所 示 。 

Step2 单 击 页 面 编 辑 区 空白 处 ,在 “属性 ”面板 中 双击 “页 面 载 人 时 ”事件 ,新 增 一 
例 ,如 图 6-62 所 示 。 

Step3 ”在 弹出 的 “用 例 编辑 器 ”对话 框 中 选择 “设置 面板 状态 ”, 具 体 设置 如 图 6-63 和 
图 6-64 所 示 。 单 击 “ 确 定 ” 按 钮 。 
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图 6-61 “手动 切换 焦点 图 . rp" 文件 


图 6-62 双击 “页 面 载 入 时 ”事件 新 增 用 例 


各 用 例 编辑 回 “(页面 束 入 时 ) EE 
用 便 名 称 用 人 1 新 条 件 
第 二 沙 : 点 二 新 增 动作 壬 三 步 : 担 炽 动作 第 四 沙 : 配置 动作 


a 本 远近 要 设置 发 志 的 动 术 面 板 
4 PR 及 设 枉 关 习 下 一 个 自动 本 环 区 环 同 隔 3000 。 | 汪 到 a 
当前 窗口 诗 吵 delay frst change 
新 硬 口 /是 答 页 
弹出 窗口 
允 窗 口 
关 河 窗口 
4 在 内 部 框 妆 打开 媒 插 
内 部 框架 
信 框 菜 
请 动 到 元 件 ( 昼 点 瑟 接 ) ER 
Ne 选择 状态 | 下 一 个 


同 集 点 本 ( 动 志 午 模 ) 


同 从 最 后 一 个 到 第 一 个 生动 看 环 
同 腊 环 间隔 3000 。 | 毫秒 
加 Delay first state change by 3000 ms 


这 只 


图 6-63 为 新 增 用 例 设置 点 的 动作 


Step4 按 Ctrl+S 组合 键 对 文件 进行 保存 ,至 此 ,自动 切换 焦点 图 的 交互 动作 制作 完 
成 , 单 击 国 (预览 ) 按 钮 , 即 可 在 浏览 器 中 预览 原型 效果 。 
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诏 用 例 编辑 妇 (页面 地 入 时 ) x 
人 


用 全 名称 | 严 昌 1 
笑 一 步 : 点 二 新 增 动 作 血 = 步 :组织 动作 血 四 步 : 本 二 动作 
PE BPE 运 择 委 设 秆 状态 的 动 术 画板 
4 打开 如 这 多 二 E23 本 
当前 窗口 入; jh oot 500ms 向 二 
= 二 [上 逆 设置 点 (动态 重 板 ) 大 赤 到 六 志 1 
OA Ee 
弹出 窗 品 | 
多 鲁 品 下 
| i 
4 在 内 iE 打开 这 
内 部 框 洋 
父 框 闫 i EE 
滚动 到 元 件 ( 昼 点 锋 接 ) 
设 村 首届 本 
2 可 从 最 后 一 个 到 入 一 个 翅 生 汪 
4 Sm 
fn 司 看 环 同 两 3000 | 毫秒 
E71 加 Delay first state change by 3000 ms 
加 J E % 向 左 满 动 ”~ 用 时 500 | 写 秒 
Ee 
:三 
必要 要 像 有 


图 6-64 为 新 增 用 例 设置 焦点 图 的 动作 


3) 手动 切换 后 转 为 自动 切换 
一 旦 手动 切换 焦点 图 , 则 焦点 图 就 失去 了 自动 切换 的 效果 ,这 是 因为 一 旦 单 击 元 件 , 焦 


点 图 就 不 属于 页 面 载 人 事件 ,也 就 不 能 再 自动 切换 了 。 为 了 解决 手动 切换 后 转 为 自动 切换 
的 问题 ,只 需要 给 一 个 事件 添加 用 例 即 可 ,具体 做 法 如 下 。 
选中 “焦点 图 ”动态 面板 ,如 图 6-65 所 示 。 


Stepl 


图 6-65 选中 “焦点 图 ”动态 面板 


Step2 ”在 “属性 ”面板 中 单 击 “ 动 态 面 板 状 态 改 变 时 ”事件 ,新 增 一 个 用 例 , 在 弹出 的 “用 
例 编辑 器 "对话 框 中 选择 “设置 面板 状态 ”. 具 体 设置 如 图 6-66 和 图 6-67 所 示 。 


单 击 “ 确 定 ” 按 钮 完成 设置 。 
Step3 按 Ctrl 十 S 组 合 键 对 文件 进行 保存 ,至 此 ,3 种 切换 焦点 图 的 交互 动作 都 制作 完 


成 了 . 单 击 加 (预览 ) 按 钮 , 即 可 在 浏览 器 中 预览 原型 效果 。 
注意 : 本 章 制作 的 交互 效果 并 不 是 产品 级 别 的 ,并 不 能 作为 最 终 的 产品 使 用 ,而 是 为 了 


更 好 地 与 研发 沟通 和 向 上 级 汇报 。 
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| 
PE 
多 设 可 点 到 下 -个 入 大 环 二 F 友 二 3000 | 加 本 可 未 仿 的 
Bi deay rst change = 一 
同 当前 元 件 
EEC EE 
站 条 二 (SS) 


后 从 最后 一 个 到 茵 一 个 把 环 
冉 竹本 二 |3000 “| 室 

贱 Delay frst state change by 3000 ms 

7 R00 |e 

7 Ry |500 | 向 


第 二 步 : 高志 新 增 动作 第 三 步 : 姐 织 动作 粤 四 上 : 配置 动作 
4 可 4 1 远 所 要 没 生 状态 的 动态 草 板 
4 打开 E 这 多 设置 堪 当 天 到 下 一 个 疝 左 江 动 out 500ms 各 下 Er Pp 
wD 问世 看 动 m SI0ms 生动 信 环 信 环 同 Ll . 
ee | | 0 
点 到 下 一 个 本 a 
漳 册 窗口 day frst change 网 设 和 点 (动态 面板 居 态 到 下 一 个 旦 动 第 环 吾 环 同 凯 3000 全 


a 何 二 (动态 天 板 ) 改 杰 到 下 一 人 癌 朋 动 out S00ms 月 


过 逐 状 志 | 下 一 个 
后 从 最 后 一个 到 往 一 个 生动 入 环 


后 乔 环 间隔 [3000 。] 室 从 

Delarfirst state change by 3000ms 
进入 时 动画 。 | 向 左 江 动 ”| 用 时 |500 | 这 只 
进出 时 动画 。 | 向 左 江 动 ”| 用 时 |500 。 | 过 好 
讼 本本 从 ES 
同 展开 收 起 元 | 


图 6-67 为 新 增 用 例 设置 焦点 图 的 交互 动作 


学 习 目标 

。 了 解 界面 的 设计 常识 。 

。 熟悉 产品 高 保 真 原型 图 的 制作 流程 。 

。 掌握 洗刷 刷 App 高 保 真 原型 图 交互 设计 的 方法 。 


在 产品 设计 过 程 中 ,使 用 高 保 真 原型 图 不 仅 可 以 显著 降低 沟通 成 本 ,保证 开发 流程 顺 
畅 ,还 能 够 帮助 开发 者 模拟 大 多 数 使 用 场景 ,规避 一 些 不 必要 的 开发 风险 。 在 产品 高 保 真 原 
型 图 的 设计 阶段 ,产品 经 理 也 要 掌握 一 些 设计 常识 ,针对 页 面 的 设计 和 交互 效果 提出 优化 意 
见 , 保 证 高 保 真 原型 图 和 真实 产品 的 最 大 贴 合 度 。 本 章 将 对 设计 常识 .界面 设计 以 及 高 保 真 
原型 图 交互 设计 做 详细 讲解 。 


7.1 设计 常识 


一 款 被 用 户 接受 的 产品 不 仅 要 具备 卓越 的 功能 ,还 要 具备 精美 的 设计 。 掌 握 设计 常识 
能 够 让 产品 经 理 在 设计 产品 功能 的 同时 兼顾 产品 的 外 在 表现 形式 ,保证 和 UI 设计 师 沟 通 
顺畅 。 本 节 将 从 设计 构图 和 设计 色彩 两 方面 讲解 设计 常识 。 


7.1.1 设计 构图 


构图 就 是 在 有 限 的 画面 中 ,对 各 种 元 素 进行 合理 布局 和 安排 ,使 图 形 和 文字 在 画面 中 处 
于 最 佳 位 置 ,产生 最 佳 视觉 效果 。 在 设计 产品 界面 时 ,通过 设计 构图 能 够 让 界面 化 繁 为 简 ， 
突出 产品 的 核心 功能 和 卖点 ,使 产品 表现 形式 符合 产品 经 理 的 产品 设计 思路 。 下 面 将 从 构 
图 元 素 .构图 原则 和 构图 方式 3 个 方面 详细 讲解 设计 构图 。 


1. 构图 元 素 


构图 是 对 界面 上 各 类 元 素 的 组 织 和 排列 ,这 些 元 素 可 以 概括 为 3 类 : 点 、 线 、 面 。 点 、 
线 , 面 是 从 自然 界 抽象 出 来 的 简单 造型 元 素 ,本 身 不 具有 太 多 的 意义 ,主要 用 于 分 析 元 素 之 
间 的 关系 。 

1) 点 

点 是 视觉 设计 中 最 基本 的 元 素 。 这 里 的 点 不 是 指 形状 ,而 是 指 画面 中 处 于 重要 位 置 的 
物体 ,是 点 级 丰富 界面 的 元 素 。 如 图 7-1 所 示 ,在 画面 中 3 个 苹果 就 是 整个 画面 的 点 。 
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图 7-1 点 


在 界面 中 ,点 在 不 同 的 位 置 .给 人 的 感受 也 不 同 , 如 图 7-2 所 示 。 


图 7-2 点 的 位 置 


在 图 7-2 所 示 的 画面 中 ,3 个 点 分 别 位 于 画面 的 上 面 、 下面 和 右 侧 。 其 中 ， 
人 活泼 .不 稳定 的 感觉 ,下 面 的 点 给 和 沉稳、 呆板 的 感觉 , 右 侧 的 点 给 人 飘逸 、 eri 

当 夯 面 中 有 很 多 零散 的 点 时 ,用 户 的 视线 会 移 来 移 去 ,给 人 
的 目的 就 是 如 何在 不 规则 中 不 显得 凌乱 。 通 常 采 用 放大 焦点 的 方法 ,把 想 
大 并 且 放 在 居中 的 位 置 ,来 凸显 该 元 素 , 如 图 7-3 所 示 。 


® e 
@ 1 
© < 


7-3 ”放大 焦点 


突出 的 内 容 放 


2) 线 
在 设计 中 , 线 同 样 是 一 个 抽象 的 概念 ,只 有 位 置 和 长 度 。 线 在 界面 中 起 到 连接 .平衡 以 


及 分 割 的 作用 。 只 要 是 在 整个 界面 中 起 到 线 的 作用 的 元 素 , 都 可 以 称 为 线 , 例 如 一 行文 字 、 
一 条 公路 、 一 条 色 带 等 ,如 图 7-4 所 示 。 
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图 7-4 线 


值得 一 提 的 是 , 线 又 分 为 曲线 和 直线 。 其 中 ,直线 表现 为 静 , 给 人 力量 .稳定 .坚韧 的 感 
觉 ;曲线 表现 为 动 ,给 人 丰满 ,柔软 ,优雅 的 感觉 。 图 7-5 
是 线 在 设计 中 的 运用 示例 。 

3) 面 

面 在 设计 中 具有 长 度 、 宽 度 和 一 定 的 形状 ,在 界面 
中 占 的 面积 最 大 ,给 人 的 视觉 冲击 也 最 强烈 ,是 界面 的 
主体 。 根 据 面 的 形状 ,可 以 把 面 分 为 直线 型 面 . 曲 线 型 
面 和 不 规则 面 , 具 体 介 绍 如 下 。 

。 直线 型 面 : 其 特点 是 安定 .有 秩序 。 

。 曲线 型 面 : 其 特点 是 柔软 轻松、 饱满 。 

。 不 规则 面 : 其 特点 是 自然 ,生动 。 


2. 构图 原则 


优秀 的 设计 作品 要 具有 构图 的 形式 美 。 构 图 的 形 
式 美 主要 体现 在 构图 原则 上 。 常 见 的 构图 原则 有 均衡 、 
对 比 、 律 动 、 视 点 等 ,具体 介绍 如 下 。 图 7-5 线 的 运用 示例 

1) 均衡 

均衡 是 构图 的 基本 原则 ,通常 是 指 以 画面 中 心 为 支点 ,画面 左右 ,上 下 所 呈现 的 结构 “ 重 
量 ? 在 视觉 上 的 均等 和 平衡 ,如 图 7-6 所 示 。 


图 7-6 均衡 构图 
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在 图 7-6 中 ,中 间 的 树 将 画面 分 割 成 左右 两 个 等 量 空间 ,给 人 稳定 、 静 谥 的 感觉 。 通 过 
均衡 构图 可 以 使 各 元 素 在 布局 上 保持 “重量 ”的 均等 平衡 ,从 而 使 界面 具有 平衡 感 和 稳定 感 。 
在 界面 设计 中 ,设计 师 最 习惯 的 做 法 是 用 堆 成 的 方式 保持 均衡 ,如 图 7-7 所 示 。 


图 7-7 堆 成 的 均衡 构图 


需要 注意 的 是 ,均衡 构图 虽然 平衡 感 和 稳定 感 较 强 , 但 是 绝对 的 均衡 往往 又 会 给 人 带 来 
呆板 、 缺 乏 变 化 的 感觉 。 因 此 设计 师 在 实际 运用 中 要 适当 把 握 均衡 的 对 称 关系 ,创造 稳定 又 
不 呆板 的 形式 美感 。 例 如 ,图 7-7 左边 的 构图 是 一 个 左右 均衡 的 构图 结构 ,但 右边 并 没有 像 
左边 那样 运用 一 个 大 面积 的 色 块 ,而 是 通过 小 色 块 的 组 合 形成 一 个 和 左边 大 面积 色 块 对 等 
的 均衡 构图 形式 。 

2) 对 比 

对 比 是 指 通 过 画面 中 不 同 元 素 之 间 的 比较 来 突出 和 强化 主体 ,给 浏览 者 更 强 的 视觉 冲 
击 。 常 见 的 对 比 有 大 小 对 比 、 粗 细 对 比 、 政 密 对 比 、 曲 直 对 比 、 明 上 暗 对 比 、 虚 实 对 比 、 远 近 对 
比 、 动 静 对 比 等 ,如 图 7-8 和 图 7-9 所 示 。 


图 7-8 大 小 对 比 图 7-9 虚实 对 比 


在 图 7-8 中 ,通过 字符 大 小 的 对 比 ,使 画面 具有 空间 感 。 在 图 7-9 中 ,将 背景 虚 化 ,凸显 
主体 内 容 。 在 界面 设计 中 ,对 比 构图 主要 体现 为 大 小 或 强 弱 的 对 比 ,如 图 7-10 所 示 。 


图 7-10 对 比 构图 


在 图 7-10 中 , 方 框 标示 的 区 域 可 以 放置 一 些 重要 的 信息 内 容 , 通 过 面积 大 小 的 对 比 关 
系 凸显 这 些 内 容 。 
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3) 律动 
律动 是 指 构 图 中 的 节奏 和 韵律 。 在 设计 中 ,节奏 和 韵律 是 构图 的 重要 手段 ,也 是 构图 应 
遵循 的 重要 原则 ,主要 表现 在 画面 线条 、 形 状 、 影 调 、 色 彩 的 有 序 重复 和 交替 ,如 图 7-11 


所 示 。 
一 -一 一” 一 一 一 


图 7-11 节奏 和 韵律 


7 


在 图 7-11 中 ,虽然 画面 展示 的 商品 相同 ,但 是 通过 不 同 的 色彩 及 标识 位 置 的 变化 ,让 画 
面 更 有 韵律 和 趣味 性 。 在 构图 中 ,节奏 和 韵律 是 设计 师表 达 情 感 的 手段 ,可 以 激发 和 丰富 用 
户 的 想象 力 。 在 设计 中 ,任何 物体 ,任何 构图 要 素 都 可 以 用 重复 的 办 法 形成 节奏 ,然后 通过 
韵律 的 变化 ,使 其 具有 趣味 性 。 图 7-12 所 示 的 色 块 就 符合 界面 设计 中 律动 的 原则 。 


图 7-12 符合 律动 原则 的 色 块 


4) 视点 

视点 (也 称 视觉 焦点 ) 指 的 是 画面 的 视觉 中 心 。 在 构 
图 中 ,视点 原则 就 是 每 个 界面 都 要 有 一 个 视觉 中 心 ,在 视 
觉 中 心 放置 的 一 定 是 界面 中 最 重要 的 内 容 , 以 此 为 基础 
进行 构图 ,能 更 突出 地 表现 视觉 主体 ,并 将 用 户 的 注意 力 
集中 到 主要 内 容 上 。 如 图 7-13 所 示 , 画 面 的 视点 就 是 中 
间 的 按钮 。 


3. 构图 方式 


在 构图 时 ,除了 遵循 构图 原则 外 ,还 可 以 运用 一 些 常 
见 的 构图 方式 ,如 黄金 分 割 构 图 、 对 角 式 构图 、 三 角 构 图 、 
十 字形 构图 、 曲 线 构图 等 ,具体 介绍 如 下 。 

1) 黄金 分 割 构图 
图 7-13 视点 黄金 分 割 是 指 将 整体 一 分 为 二 , 较 大 的 部 分 与 整体 
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的 比值 等 于 较 小 的 部 分 与 较 大 的 部 分 的 比值 ,其 比值 约 为 0. 618。 按 这 个 比例 进行 分 割 被 
公认 为 是 最 能 引起 美感 ,因此 这 种 分 割 被 称 为 黄金 分 割 。 在 构图 时 ,常用 2:3.3:5.5:8 
等 近似 黄金 分 割 的 比例 关系 进行 构图 ,这 种 构图 方式 也 被 称 为 黄金 分 割 构图 。 图 7-14 所 示 
的 手表 便 处 于 黄金 分 割 的 位 置 。 


图 7-14 黄金 分 割 构图 


值得 一 提 的 是 ,在 构图 中 还 有 一 种 特殊 的 构图 方式 一 一 九宫 格 构图 。 九 宫 格 构图 就 是 
在 画面 上 横 、 竖 各 画 两 条 与 边 平行 ,等 分 画面 的 直线 ,将 画面 分 成 9 个 相等 的 格 ,在 中 心 格 4 
个 角 之 一 的 位 置 安排 主体 ,如 图 7-15 所 示 。 


天 天 #J 323 
图 7-15 九宫 格 构图 

在 图 7-15 中 ,中 心 格 的 4 个 点 都 符合 黄金 分 割 律 ,是 表现 画面 美感 和 张力 的 绝 佳 位 置 ， 
因此 九宫 格 构图 也 属于 黄金 分 割 构图 的 一 种 形式 。 在 界面 设计 中 ,九宫 格 给 用 户 一 目 了 然 
的 感觉 ,操作 也 非常 便捷 。 图 7-16 是 九宫 格 构图 在 手机 界面 中 的 应 用 示例 。 

2) 对 角 式 构图 

对 角 式 构图 是 将 主体 安排 在 对 角 线 上 ,达到 突出 中 心 内 容 的 效果 。 这 样 的 构图 方式 富 
于 变化 ,生动 线条 感 分 明 。 图 7-17 的 饮品 广告 就 是 典型 的 对 角 式 构图 。 

3) 三 角 构 图 

三 角 构 图 也 称 金字 塔 式 构图 。 在 画面 中 .三 角 构图 会 将 3 个 视觉 中 心 定 为 三 角形 的 3 


上 
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图 7-17 对 角 式 构图 


个 顶点 ,或 利用 三 点 成 一 面 的 几何 形 元 素 形成 一 个 三 角形 。 采 用 三 角 构图 稳定 又 不 乏 时 尚 ， 
均衡 又 能 突出 重点 。 图 7-18 所 示 的 图 片 就 是 一 个 典型 的 三 角 构图 。 

需要 注意 的 是 ,三 角 构图 并 不 一 定 要 有 三 角形 ,在 界面 设计 中 ,通过 文字 、 图 片 的 组 合 也 
可 以 形成 三 角 构 图 ,如 图 7-19 所 示 。 

在 图 7-19 中 ,头像 .姓名 和 数据 三 者 有 不 同 宽度 ,形成 了 一 个 三 角 构 图 。 需 要 注意 的 
是 ,三 角 构 图 既 可 以 是 正三 角形 ,还 可 以 是 倒 三 角形 或 者 斜 三 角形 ,如 图 7-20 所 示 。 

4) 十 字形 构图 

十 字形 是 两 条 线 的 垂直 交叉 ,无 论 两 条 线 的 倾斜 度 如 何 变化 ,人 的 视觉 中 心 都 会 集中 在 
十 字形 的 交叉 点 上 。 十 字形 构图 的 纵深 感 强 , 会 把 人 们 视线 由 四 周 引 向 中 心 , 适 于 空间 感 的 
表现 。 图 7-21 所 示 的 手机 广告 图 就 采用 了 十 字形 构图 。 


正三 角形 


My Portfolio 


图 7-20 


第 7 章 


人 
, /RUCKUS 、 
by A ARS Nh 


三 角 构 图 2 


设计 常识 和 产品 高 保 真 原型 图 


斜 三 角形 
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5) 曲线 构图 


曲线 构图 所 包含 的 曲线 分 为 规则 形 曲线 和 不 规则 曲线 ， 
在 设计 中 曲线 的 应 用 非常 广泛 ,表现 手法 也 是 多 样 的 ,可 以 运用 对 角 式 曲线 构图 、S 形 曲线 


图 7-21 十 字形 构图 


给 和 人 以 柔 和 ,浪漫 ,优雅 的 感觉 。 


构图 等 。 图 7-23 所 示 的 商品 展示 图 片 就 是 一 个 典型 的 S 形 曲线 构图 。 


图 7-22 S 式 曲线 构图 


仔细 观察 图 7-22, 可 以 看 出 S 形 曲线 构图 其 


就 是 按照 视线 由 左 至 右 `. 由 上 至 下 的 轨 


迹 布置 画面 元 素 。 其 中 每 个 转角 处 是 人 的 视线 停留 时 间 最 长 的 地 方 , 所 以 应 该 把 想 要 突出 


的 产品 或 功能 放 在 转角 位 置 。 


值得 一 提 的 是 ,还 有 一 种 特殊 的 构图 形式 一 一 环形 构图 , 它 属于 曲线 构图 的 一 种 。 采 用 


环形 构图 ,主体 四 周 会 被 圆 形 的 色 条 或 


色 块 包围 ,起 到 突出 和 强调 主体 的 作用 。 图 7-23 所 


示 界 面 就 采用 了 环形 构图 。 
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新 玫 有理 。 基 网 三 时 。 中 网 二 让 。 长 期 于 时 


新 手 理财 宝 
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图 7-23 环形 设计 


7.1.2 设计 色彩 


一 款 产品 呈现 的 页 面 内 容 是 否 能 令 用 户 赏心悦目 ,产生 良好 的 用 户 体验 ,不 仅 取 决 于 页 面 
的 设计 结构 ,还 取决 于 色彩 的 选择 和 搭配 。 下 面 将 对 界面 设计 中 色彩 的 相关 知识 做 详细 讲解 。 


1. 色彩 的 分 类 

在 界面 设计 中 ,色彩 通常 分 为 3 类 ,分 别 为 主题 色 、 辅 助 色 、 点 级 色 。 下 面 对 色 彩 的 这 3 
种 分 类 进行 详解 介绍 。 

1) 主题 色 


主题 色 是 一 个 界面 中 最 主要 的 色彩 ,界面 中 面积 较 大 的 色彩 、 装 饰 图 形 色 彩 或 者 主要 模 
块 使 用 的 色彩 一 般 都 是 主题 色 。 在 界面 配色 中 ,主题 色 是 配色 的 中 心 色 , 主 要 是 以 页 面 中 整 
体 栏目 或 中 心 图 像 所 形成 的 中 等 面积 的 色 块 为 主 。 例 如 ,图 7-24 就 是 选择 蓝 色 作为 主题 色 
的 App 的 界面 。 


图 7-24 主题 色 
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一 个 界面 中 通常 都 存在 不 止 一 种 色彩 ,除了 具有 视觉 中 心 作用 的 主题 色 之 外 ,还 有 用 于 


2) 辅助 色 
呼应 主题 色 的 辅助 色 , 辅 助 色 的 作用 是 使 页 面 配色 更 完美 .更 丰富 。 辅 助 色 的 视觉 重要 性 和 
面积 仅 次 于 主题 色 ,常常 用 于 衬托 主题 色 , 使 主题 色 更 突出 。 图 7-25 为 选用 浅 蓝 色 作 为 辅 


助 色 的 页 面 。 
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图 7-25 辅助 色 


3) 点 级 色 
点 级 色 通 常用 来 打破 单调 的 网 页 整体 效果 ,营造 生动 的 网 页 空间 氛围 ,所 以 在 网 页 设计 
中 通常 以 对 比 强 烈 或 较为 鲜艳 的 色彩 作为 点 级 色 。 在 网 页 设计 中 ,点 级 色 的 应 用 面积 越 小 ， 


色彩 越 强 ,点 组 色 的 效果 才 会 越 突出 。 图 7-26 为 选用 绿色 作为 点 缀 色 的 界面 。 


Mealtime 


图 7-26 点 缀 色 


2. 色彩 的 属性 
色彩 的 3 种 属性 是 色相 、 饱 和 度 、 明 度 ,任何 一 种 色彩 都 有 这 3 种 属性 。 下 面 对 这 3 种 
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属性 做 具体 介绍 。 

1) 色相 

色相 是 色彩 的 首要 特征 ,是 区 别 不 同色 彩 最 准确 的 标 
准 。 同 一 物体 在 不 同 波长 的 光 的 照射 下 ,人 眼 会 感觉 到 不 
同 的 色彩 ,如 图 7-27 所 示 。 

2) 饱和 度 

饱和 度 也 称 为 纯度 ,是 指 色 彩 的 鲜艳 度 。 饱 和 度 越 
高 ,色彩 也 越 鲜 艳 。 一 种 色彩 与 其 他 色彩 混合 ,饱和 度 就 
会 下 降 ,色彩 就 会 变 暗 、 变 淡 。 当 色彩 的 饱和 度 降 到 最 低 
时 就 会 失去 色相 , 变 为 无 色彩 ( 黑 、 白 \、 灰 ), 如 图 7-28 所 示 。 


图 7-28 饱和 度 


图 7-27 色相 


3) 明度 

明度 指 的 是 色彩 光亮 的 程度 。 所 有 色彩 都 有 不 同 程度 的 光亮 。 在 图 7-29 中 ,最 左 侧 的 
红色 明度 高 ,最 右 侧 的 红色 明度 低 。 在 无 色彩 中 ,明度 最 高 的 为 白色 ,中 间 是 灰色 ,最低 的 为 
黑色 。 需 要 注意 的 是 ,色彩 明度 的 变化 往往 会 影响 到 饱和 度 。 例 如 ,红色 加 入 白色 后 ,明度 
提高 了 ,饱和 度 却 会 降低 。 


a 加 加 可 加 


图 7-29 明度 
3. 色彩 的 象征 意义 
在 色彩 心理 学 中 ,色彩 还 蕴含 着 象征 意义 。 不 同 的 色彩 会 带 给 人 不 同 的 心理 感受 。 
1) 红色 


红色 是 热烈 .冲动 `. 强 有 力 的 色彩 。 红 色 代 表 热情 、 活 泌 、 热 闹 , 容 易 引 起 人 的 注意 ,也 容 
易 使 人 兴奋 激动. 冲动。 此 外 ,红色 也 代表 警告 .危险 等 含义 。 如 果 在 设计 中 添加 红色 ,可 
以 带 给 人 兴奋 和 激情 的 感觉 。 图 7-30 为 选用 红色 作为 主题 色 的 界面 。 

2) 检 色 

橙色 是 一 种 充满 生机 和 活力 的 颜色 ,象征 着 收获 .富足 和 快乐 。 橙 色 虽 然 不 像 红色 那样 
强烈 ,但 也 能 吸引 用 户 的 注意 力 。 橙 色 常 用 于 食物 、 促 销 等 内 容 。 图 7-31 为 选用 橙色 作为 
主题 色 的 界面 。 

3) 黄色 

黄色 是 一 种 明朗 .愉快 的 颜色 ,饱和 度 较 高 ,象征 着 光明 ,温暖 和 希望 。 通 常 儿童 更 喜欢 
明快 的 色彩 ,在 设计 中 加 入 黄色 更 能 营造 出 活力 感 。 图 7-32 为 选用 黄色 作为 主题 色 的 
界面 。 


互联 网 产品 设计 思维 与 实践 


+ Tangerine 


ET 


cs ‘00 @ > 
= 
1 
图 7-31 以 权 色 为 主题 色 的 界面 


4) 绿色 

绿色 是 一 种 清 夹 ,平和 ,安稳 的 颜色 ,象征 着 和 平 . 新 鲜 和 健康 。 在 设计 中 添加 绿色 可 以 
带 给 人 健康 的 感觉 。 图 7-33 为 选用 绿色 作用 主题 色 的 界面 。 

5) 蓝 色 

蓝 色 一 种 安静 的 冷色 调 颜 色 ,象征 着 沉稳 和 智慧 ,因此 一 些 科 技 类 的 企业 网 站 通常 会 使 
用 蓝 色 作为 主题 色 。 图 7-34 所 示 的 App 界面 选用 蓝 色 作为 主题 色 。 

6) 紫色 

紫色 是 一 种 高 贵 的 色彩 ,象征 着 雍容 、 优 雅 . 奢 华 。 中 国 传统 文件 中 以 紫色 为 高 贵 的 色 
彩 。 图 7-35 所 示 的 页 面 选用 紫色 来 营造 优雅 奢华 的 氛围 。 
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图 7-33 ”以 绿色 为 主题 色 的 界面 


7) 黑色 

黑色 作为 设计 中 使 用 最 广泛 的 颜色 之 一 ,象征 着 权威 高雅、 低调 和 创意 ,此 外 也 象征 着 
执着 冷漠 和 防御 ,是 设计 中 的 百 搭 颜色 。 图 7-36 所 示 的 App 界面 选用 黑色 作为 主题 色 。 

8) 白色 

白色 同样 是 设计 中 使 用 最 广泛 的 颜色 之 一 ,象征 着 纯洁 神圣、 善良 。 此 外 ,白色 还 象征 
着 恐怖 和 死亡 。 在 设计 中 ,通常 用 白色 作为 主题 色 , 以 大 范围 的 留 白 彰 显 设 计 格 调 ,图 7-37 
所 示 的 App 界面 就 使 用 了 大 面积 的 白色 。 
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7-34 ”以 蓝 色 为 主题 色 的 界面 
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图 7-35 ”以 紫色 为 主题 色 的 界面 
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图 7-36 ”以 黑色 为 主题 色 的 界面 


第 7 章 设计 常识 和 产品 高 保 真 原型 图 


TROOP 


10 PE sa 
poopie 
Sets eg 


ey ET 
ecTies 
es 
Po 


图 7-37 以 白色 为 主题 色 的 界面 


7.2 洗刷 刷 App 高 保 真 原型 图 制作 


在 产品 设计 中 ,高保 真 原型 图 就 是 低 保 真 原型 图 .交互 逻辑 和 UI 设计 效果 的 综合 产 
物 。 高 保 真 原型 图 既 具 备 产品 的 功能 和 交互 逻辑 ,又 具备 良好 的 视觉 效果 。 本 节 将 从 界面 
效果 . 切 图 、 原 型 模板 、 原 型 尺寸 .交互 效果 等 方面 详细 讲解 洗刷 刷 App 高 保 真 原型 图 的 制 
作 过 程 。 


7.2.1 界面 设计 


随 着 软件 应 用 的 广泛 普及 ,人 们 对 于 产品 的 要 求 也 逐步 提高 ,用户 不 仅 重 视 产 品 功能 实 
用 性 ,而 且 需 要 精美 的 界面 设计 来 提升 产品 体验 。 在 高 保 真 产 品 界面 设计 中 ,可 以 从 设计 风 
格 .颜色 和 字体 3 方面 对 界面 设计 效果 进行 整体 把 控 。 如 图 7-38 所 示 为 洗刷 刷 App 的 部 分 
页 面 效果 截图 。 
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图 7-38 洗刷 刷 App 界面 设计 
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1. 设计 风格 


在 洗刷 刷 App 的 界面 设计 中 ,整体 采用 扁平 化 的 设计 风格 ,降低 了 图 形 的 复杂 程度 ,简化 
了 装饰 效果 的 运用 ,将 各 部 分 组 件 以 最 简单 和 直接 的 方式 呈现 出 来 ,以 消除 用 户 的 认 知 障碍 。 
例如 ,图 7-39 所 示 的 图 标 就 采用 了 扁平 化 的 设计 风格 , 握 弃 了 元 余 的 装饰 效果 (如 高 光 、 阴 影 、 
纹理 ,渐变 等 ) ,通过 线条 简单 地 勾勒 出 图 标的 轮廓 ,给 用 户 以 简单 干净、 利落 的 感觉 。 


分 99 从 8 


7-39 洗刷 刷 App 界面 图 标 


2. 色彩 

在 App 界面 设计 中 ,色彩 可 以 给 用 户 最 直观 的 视觉 冲击 。 运 用 不 同 的 色彩 搭配 ,可 以 
产生 各 种 各 样 的 视觉 效果 , 带 给 用 户 不 同 的 视觉 体会 ,因此 色彩 至 关 重 要 。 当 App 的 设计 
风格 确定 后 , 接 下 来 就 要 确定 其 主题 色 和 辅助 色 。 

本 项 目 是 针对 洗车 类 App 进行 设计 ,主题 色 选 取代 表 稳 重 、 清 夹 ,干净 的 青色 ,辅助 色 选 
取 百 搭 的 浅 灰 色 , 点 级 色 选 取 饱 和 度 较 高 的 橙色 。 这 3 个 色彩 的 RG、B 色 值 如 图 7-40 所 示 。 

3. 字体 

在 App 中 ,字体 一 般 为 操作 系统 默认 的 字体 。 例 如 ,在 iOS 9 系统 中 ,英文 字体 为 San 
Francisco, 中 文字 体 为 “ 苹 方 ”; 在 Android 5.0 系统 中 ,英文 字体 为 Roboto, 中 文字 体 为 “ 思 
源 黑体 ”。 例 如 ,洗刷 刷 App 需要 在 苹果 手机 上 测试 , 则 可 以 选择 使 用 iOS 系统 默认 字体 。 
图 7-41 为 “ 苹 方 "字体 样式 。 


主题 色 R: 94 G: 194 B: 201 平方 字体 样式 
辅助 色 R: 242 G: 242 B: 242 苹 方 字体 样式 
点 缀 色 R: 255 G: 138 B: 47 苹 方 字体 样式 


图 7-40 色彩 搭配 图 7-41 “ 苹 方 ”字体 样式 


7.2.2 切 图 

切 图 是 指 将 设计 效果 图 切 成 便于 前 端 工程 师 书写 代码 时 使 用 的 图 片 。 在 移动 端 界面 
中 ,在 为 某 些 单独 的 元 素 添加 交互 效果 时 ,就 需要 将 其 切 出 ,并 使 之 适 配 不 同 的 屏幕 分 辩 率 。 
图 7-42 为 iPhone 手机 的 标准 版 和 Plus 版 的 图 标 。 
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图 7-42 iPhone 手机 的 标准 版 和 Plus 版 的 图 标 
需要 切 图 的 对 象 包 括 所 有 图 标 和 控件 . 要 添加 交互 效果 以 及 代码 书写 比较 困难 的 小 图 


标 都 需要 进行 切 图 。 例 如 , 当 鼠 标 悬 浮 在 图 7-43 所 示 的 洗刷 刷 App 图 标 上 时 ,图 标 会 出 现 
明度 的 变化 ,因此 需要 把 这 些 有 交互 效果 的 图 标 单独 切 出 。 


透明 度 的 变化 


图 7-43 洗刷 刷 App 图 标 


值得 一 提 的 是 ,在 切 图 时 ,需要 特别 注意 以 下 的 基本 原则 : 

(1) 切 图 尺寸 (像素 数 ) 应 该 为 偶数 ,这 是 为 了 保证 切 图 资源 可 以 适 配 不 同 的 机 型 。 

(2) 压缩 文件 大 小 。 在 界面 设计 中 ,有 些 图 片 也 需要 切 图 ,如 引导 页 、 启 动 页 、 默 认 图 
等 。 这 些 图 片 文件 都 较 大 ,不 利于 用 户 在 使 用 App 过 程 中 加 载 页 面 ,因此 可 以 将 图 片 在 不 
影响 识别 的 情况 下 压缩 到 最 小 。 压 缩 文 件 大 小 可 使 用 Photoshop 软件 自 带 的 文件 压缩 功 
能 ,也 可 通过 一 些 图 片 压 缩 网 站 进行 。 压 缩 过 的 文件 用 肉眼 基本 上 分 辨 不 出 压缩 的 损失 。 
图 7-44 为 使 用 TinyPNG 网 站 压缩 图 片 文件 前 后 的 效果 对 比 。 


原 图 为 392KB 使 用 TinyPNG 网 站 压 蝙 后 为 56KB 


FP 白 日 记 FP 小 和 白 日 记 


图 7-44 图片 文件 压缩 前 后 的 效果 对 比 
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(3) 可 点 击 区 域 的 边 长 不 应 低 于 44 像素 。 切 图 时 可 以 添加 一 些 空白 面积 ,增加 触 碰面 
积 ,保证 用 户 可 以 点 击 到 。 设 计 基准 图 中 的 图 标 大 小 可 以 和 切 图 大 小 不 一 致 。 要 保证 切 图 
面积 ,使 可 点 击 区 域 的 边 长 不 低 于 44 像素 。 图 7-45 为 图 标 实际 大 小 和 增加 空白 面积 后 的 
大 小 。 随 着 手机 分 辩 率 的 提升 ,可 点 击 区 域 的 大 小 也 有 所 提升 。 例 如 , 边 长 为 66 像素 和 88 


像素 的 可 点 击 区 域 也 比较 常见 。 


图 7-45 图 标的 实际 大 小 和 增加 空白 面积 后 的 大 小 


7.2.3 移动 设备 参数 和 原型 尺 十 

原型 太 寸 是 很 多 产品 经 理 容易 忽略 的 问题 。 虽 然 原 型 信 寸 的 大 小 对 产品 的 功能 和 逻辑 
没有 任何 的 影响 ,但 在 制作 高 保 真 原型 图 时 ,符合 需求 的 原型 尺寸 能 够 让 产品 的 演示 效果 更 
通 真 。 目 前 市 场 上 的 移动 设备 主要 分 为 两 类 , 即 iOS 设备 和 Android 设备 ,下 面 将 对 这 两 类 
设备 的 参数 以 及 高 保 真 原型 尺寸 适 配 做 具体 介绍 。 


1. iOS 设备 参数 


目前 市 场 上 的 iOS 设备 主要 有 iPhone 3 GS iPhone 4/4S iPhone 5/5S/5C/SE iPhone 
6/6S/7/8 .iPhone 6 Plus/6S Plus/7 Plus/8 Plus .iPad iPad mini,iPad Pro 等 型 号 ,它们 的 
具体 参数 如 表 7-1 所 示 。 


表 7-1 iOS 设备 参数 


型 号 分 辨 率 屏幕 尺寸 /in PPI 倍率 
iPhone 3 GS 320 像素 X480 像素 & 5 163 @1x 
iPhone 4/4S 640 像素 X960 像素 3.5 326 @2x 
iPhone 5/5S/5C/SE 640 像素 X1136 像素 4.0 326 @2x 
iPhone 6/6S/7/8 750 像素 X1334 像素 Ll 326 @2x 
Re We ee 1242 像素 X2280 像素 5.5 401 @3x 
iPad 2048 像素 X1536 像素 9.7 264 @2x 
iPad mini 2048 像素 X1536 像素 7.9 326 @2x 
iPad Pro 2732 像素 X2048 像素 12.9 264 @2x 


在 表 7-1 中 出 现 了 “倍率 ”这 一 概念 。 售 率 是 苹果 公司 为 不 同 分 辨 率 的 设备 统一 设计 尺 
寸 而 做 的 标注 ,包括 @1x、@2x 和 @3x, 其 中 : 
。 @1x 适用 于 非 Retina 屏 的 iPhone。iPhone 4 以 前 的 手机 需要 使 用 该 标注 。 
。 @2x 适用 于 Retina 屏 的 便 果 设备 。iPhone4/4S/5/5S/5C/SE/6/6S/7/8 和 iPad 等 
使 用 该 标注 。 
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。 @3x 适 用 于 iPhone Plus 系列 手机 。iPhone 6 Plus/6S Plus /7 Plus 使 用 该 标注 。 

可 以 简单 地 将 它们 理解 为 倍数 关系 ,如 果 使 用 750 像素 X1334 像素 做 设计 稿 ,那么 切 
片 输出 就 是 @2x, 缩 小 为 1/2 倍 就 是 @1x, 扩 大 为 1. 5 倍 就 是 @3x。 所 以 在 界面 设计 中 , 设 
计 师 只 需 设计 一 套 基 准 图 , 切 出 两 套图 (@2x 和 @3x) 即 可 满足 iOS 设备 的 所 有 型 号 (@1x 
的 型 号 基本 已 经 被 淘汰 了 )。 


2. Android 设备 参数 


Android 系统 是 一 个 开放 的 系统 ,可 以 由 开发 者 自行 定义 ,所 以 屏幕 尺寸 规格 比较 多 元 
化 。 为 了 简化 设计 并 且 兼 容 更 多 手机 屏幕 尺寸 ,Android 系统 平台 按照 像素 密度 将 手机 屏 
幕 划分 为 低 密度 屏幕 CLDPI) .中 密度 屏幕 (MDPI) 、 高 密度 屏幕 (HDPI)、X 高 密度 屏幕 
(XHDPD .XX 高 密度 屏幕 (XXHDPI) 、XXX 高 密度 屏幕 (XXXHDPI)6 类 ,具体 参数 如 
表 7-2 所 示 。 
表 7-2 Android 设备 参数 


屏幕 像素 密度 售 率 分 辨 率 屏幕 尺寸 /in 
LDPI 0.75 240 像素 X320 像素 4 
MDPI 1 320 像素 X480 像素 3.2 
HDPI .5 480 像素 X 800 像素 3.4 
XHDPI 2 720 像素 X1280 像素 4.65 
XXHDPI 3 1080 像素 X1920 像素 [和 
XXXHDPI 4 1440 像素 X2560 像素 5.96 


在 表 7-2 中 列举 了 Android 设备 6 种 屏幕 像素 密度 的 参数 。 其 中 ,“ 售 率 ” 是 Android 
自 定义 的 一 个 无 量 纲 的 开发 长 度 单位 ,用 dp 表示 .根据 屏幕 像素 密度 的 不 同 ,倍率 与 像素 有 
以 下 几 种 关系 : 

。 当 屏 幕 密度 为 LDPI 时 ,1dp 二 0.75 像素 。 

。 当 屏 幕 密度 为 MDPI 时 ,1dp 二 1 像素 。 

。 当 屏 幕 密度 为 HDPI 时 ,1dp 二 1. 5 像素 。 

。 当 屏 幕 密度 为 XHDPI 时 ,1dp 一 2 像素 。 

。 当 屏 幕 密度 为 XXHDPI 时 ,1dp 一 3 像素 。 

。 当 屏 幕 密度 为 XXXHDPI 时 ,1dp 一 4 像素 。 

例如 ,在 MDPI 屏幕 像素 密度 下 制作 的 图 标尺 寸 是 32 像素 X32 像素 ,如 果 要 适 配 到 
XHDPI 屏幕 像素 密度 的 设备 ,就 需要 将 图 标尺 寸 扩大 一 倍 , 即 64 像素 X64 像素 。 需 要 注 
意 是 ,虽然 Android 设备 的 屏幕 尺寸 规格 较 多 ,但 在 设计 时 ,设计 师 只 需要 考虑 设计 720 像 
素 X1280 像素 的 分 辨 率 即 可 。 


3. App 高 保 真 原型 尺寸 


在 使 用 Axure 制作 高 保 真 原型 图 时 ,如 果 要 在 一 个 或 多 个 设备 中 测试 产品 原型 ,首先 
要 确定 移动 设备 的 屏幕 分 辨 率 , 再 根据 屏幕 分 辩 率 来 确定 原型 的 大 小 。 例 如 ,iPhone 6 的 屏 
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幕 分 辨 率 为 750 像素 X1334 像素 ,但 是 在 Axure 中 要 设计 适用 于 iPhone 6 的 App 原型 尺 
寸 应 为 375 像素 X667 像素 。 这 是 为 什么 呢 ? 

因为 像素 和 屏幕 分 辨 率 有 一 定 的 倍率 关系 ,不 同 的 屏幕 像素 密度 ,对 应 的 倍率 也 不 同 。 
例如 ,iOS 设备 在 @1x 的 倍率 下 ,1 像素 就 等 于 实际 的 1 像素 ;在 @2x 的 倍率 下 ,1 像素 就 等 
于 实际 的 2 像素 。 由 于 在 Axure 中 制作 的 高 保 真 原型 图 也 遵循 这 种 倍率 关系 ,因此 屏幕 分 
辩 率 为 750 像素 X1334 像素 的 iPhone 6, 其 实际 原型 尺寸 应 该 为 375 像素 X 667 像素 。 
表 7-3 给 出 了 iOS 设备 常见 的 原型 尺寸 。 

表 7-3 iOS 设备 常见 的 原型 尺寸 


型 号 倍 率 原型 尺寸 
iPhone 5/5S/5C/SE @2x 320 像素 X568 像素 
iPhone 6/6S/7/8 @2x 375 像素 X667 像素 


iPhone 6 Plus/6S 


Plus/7 Plus/8 Plus @3x 414 像素 X736 像素 


本 章 制 作 的 洗刷 刷 App 高 保 真 原型 图 将 采用 iPhone 6 进行 测试 。 


7.2.4 创建 原型 模板 


在 观看 一 些 高 保 真 原型 演示 的 时 候 , 我 们 会 发 现 高 保 真 界面 一 般 都 内 置 在 手机 模型 中 ， 
如 图 7-46 所 示 。 这 些 用 于 内 置 高 保 真 界面 的 模型 称 为 原型 模板 。 


图 7-46 App 高 保 真 原型 图 演示 


在 高 保 真 原型 图 设计 中 ,原型 模板 是 专门 用 于 展示 高 保 真 界面 的 一 个 页 面 ,通常 位 于 页 
面 面 板 最 顶层 ,由 “手机 模型 元件“ 内 部 框架 ”元 件 、 辅 助 线 以 及 公共 模块 (如 手机 状态 栏 ) 
组 成 。 其 中 ,“ 手 机 模型 "元 件 可 以 使 用 下 载 的 原型 模板 ,通过 载 入 的 方式 保存 到 库 面 板 中 ; 
“内 部 框架 ”是 元 件 库 中 的 一 个 元 件 , 用 于 载 入 高 保 真 页 面 ;手机 状态 栏 可 以 使 用 UI 设计 师 
制作 的 效果 图 。 
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阶段 案例 : 洗刷 刷 App 高 保 真 原型 图 模板 


了 解 了 原型 图 模板 的 结构 ,下 面 将 以 洗刷 刷 App 高 保 真 原 型 图 模板 为 例 做 具体 演示 。 
首先 需要 准备 手机 模型 素材 和 手机 状态 栏 效果 图 ,如 图 7-47 所 示 。 


vv phone SS 

SS God SS Siver SS Black 
~ Phone6 

6 Siver 6 Go 6 Black 
~ Phone6 Pus 

6+ Siver 6r God 6- Black 


eeeeeAT&T 合 100% mW 


7-47 手机 模型 素材 和 手机 状态 栏 效果 图 


接 下 来 制作 洗刷 刷 App 高 保 真 原型 图 模板 ,具体 步骤 如 下 : 
Stepl 打开 Axure 软件 ,在 库 面板 中 载 和 人 名 为 iPhone. rplib 的 元 件 库 。 
Step2 ”在 页 面 面 板 的 最 项 层 新 建 页 面 ,并 将 其 命名 为 “模板 原型 ", 如 图 7-48 所 示 。 


K 页 面 站 外 
[LO | 
A 门 Home 
口 Page1 
口 Paoe2 
口 Page 3 
图 7-48 新 建 页 面 


Step3 ”从 元 件 库 中 将 iPhone 6 Black 模型 拖 忠 到 “模板 原型 "页 面 .并 紧 贴 标尺 的 0 刻 
度 , 如 图 7-49 所 示 。 

Step4 ”从 元 件 库 中 将 * 内 部 框架 ?元 件 拖 电 到 “模板 原型 页 面 中 ,设置 宽 和 高 为 375 像 
素 和 667 像素 ,放置 在 和 手机 屏幕 重合 的 位 置 , 如 图 7-50 所 示 。 

Step5 ”选中 “内 部 框架 "元件 , 右 击 该 元 件 , 在 弹出 的 快捷 菜单 中 选择 “显示 /隐藏 边框 ” 
命令 ,隐藏 “内 部 框架 ?元 件 的 边框 ;再 选择 “滚动 栏 ? 一 “从 不 显示 横向 和 纵向 滚 
动 条 ”命令 ,隐藏 深 动 条 。“ 内 部 框架 "元 件 设 置 如 图 7-51 所 示 。 
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楼 本 原型 太 析 原型 


5 o 


7-49 ”使 用 iPhone 6 Black 模型 图 7-50 ”使 用 “内 部 框架 "元 件 
框架 目标 页 面 
OE 深 动 栏 + | Y ” 技 可 显示 袍 可 或 扒 身 深 动 条 
演 动 人 | 忆 是 SR 条 
和 国人 多 不 从 不 蝇 示 视 侣 和 纵向 党 动 条 


滚动 栏 


图 7-51 “内 部 框架 "元 件 设置 


Step6 ”将 素材 “状态 栏 . png” 拖 入 文档 ,调整 大 小 为 375 像素 X20 像素 ,放置 在 图 7-52 


| 


图 7-52 状态 栏 


Step7 ”将 页 面 面 板 中 名 为 home 的 页 面 改 为 “首页 ”, 并 删除 子 页 面 。 

Step8 ”双击 页 面 编辑 区 中 的 “内 部 框架 ”元 件 ,打开 如 图 7-53 所 示 的 “链接 属性 ”对 话 
框 ,将 “模板 原型 "链接 到 “首页 ”。 

Step9 ”双击 “首页 ”, 进 入 页 面 编辑 区 。 执 行 “ 布 局 “网 格 和 辅助 线 ” 一 “创建 辅助 线 ” 
命令 ,打开 “创建 辅助 线 ” 对 话 框 ,按照 图 7-54 所 示 设 置 各 参数 ,在 距 项 部 20 像 
素 、 距 左 侧 375 像素 位 置 创建 全 局 辅助 线 , 分 割 出 界面 内 容 部 分 ,如 图 7-55 
所 示 。 
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打开 在 

@ 链接 到 当前 设计 的 一 个 而 
EE 
D 页 


口 链接 到 外 部 URL 或 本 地 文件 如 : eooxcavi 
超 链 接 首页 html 


图 7-53 “链接 属性 ”对 话 框 


— 辐 一 
记 创建 畏 助 线 加 ， 一 一 一 十- 
预 设 "| 

列 行 

Px 三 ] 

网 [5 | 和 2 有 

六 J] 二 高 度 [0 坊 洒 二 高 度 |0 

io [0 ai 中 

忆 
右 他 为 全 局 铺 且 和 


图 7-54 创建 全 局 辅助 线 


7.2.5 高 保 真 页 面 交 互 效果 


随 着 技术 的 不 断 进步 ,页 面 中 能 够 实现 的 交互 效果 也 越 来 越 炫 酷 , 越 来 越 复 杂 。 这 些 复 
杂 特 效 的 形成 机 制 很 简单 ,都 是 在 一 些 基础 交互 效果 上 演变 而 来 的 。 在 App 原型 交互 设计 
中 都 离 不 开 页 面 切换 .鼠标 状态 、 页 面 滚动 ,图片 轮 播 等 简单 的 交互 效果 。 下 面 在 洗刷 刷 
App 高 保 真 原型 模板 的 基础 上 ,以 首页 和 “积分 商城 ”页面 为 例 , 演 示 洗 刷 刷 App 高 保 真 页 
面 的 基本 交互 效果 的 制作 方法 。 


1. 洗刷 刷 App 首页 交互 效果 分 析 


在 首页 中 ,交互 效果 有 五 个 ,分 别 为 定位 图 标点 击 效果 、 焦 点 图 切换 效果 、 页 面 跳 转 效 
果 、 标 签 栏 切换 效果 ,具体 交互 效果 的 位 置 如 图 7-55 所 示 。 
。 位 置 D : 定位 图 标点 击 效果 。 当 点 击 定位 图 标 E 国 国 时 ,会 向 左 滑 出 地 图 模 态 视图 ， 
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如 图 7-55 右 侧 所 示 ; 当 点 击 “ 确 定 ” 按 钮 时 ,该 模 态 视图 会 隐藏。 

”位 置 回 : 焦点 图 切换 效果 。 

。 位 置 @@.@~@: 设置 页 面 跳 转 链接 , 当 点 击 某 个 图 标 时 会 跳 转 到 相应 页 面 。 其 中 
位 置 8 可 以 设置 鼠标 悬 停 状 态 , 当 鼠 标 悬 停 在 该 位 置 时 ,按钮 会 改变 颜色 。 

。 位 置 @: 当 点 击 底部 标签 栏 的 3 个 图 标 时 ,会 切换 到 相应 页 面 ,同时 图 标 处 于 选中 状 
态 , 变 为 不 透明 的 效果 。 


有 
了 


NO Oo: O00s 
8 
Be 


@ © 0 6G: 


tN 了 R2 并 EY 加 入 我 人 


图 7-55 洗刷 刷 App 首页 交互 效果 


阶段 案例 : 首页 高 保 真 交互 效果 


根据 前 面 的 分 析 , 可 以 分 4 个 阶段 实现 首页 高 保 真 交互 效果 ,具体 如 下 。 

(1) 实现 定位 图 标点 击 效果 。 

Stepl ”打开 前 面 制作 好 的 “高 保 真 原型 模板 . rp 文件 ,双击 “首页 ”", 进 入 页 面 编辑 区 。 

Step2 ”将 素材 “首页 背景 .jpg” 拖 电 到 页 面 编辑 区 ,图片 顶 端 和 全 局 辅助 线 对 齐 , 设 置 
其 宽 和 高 为 375 像素 和 647 像素 ,如 图 7-56 所 示 。 

Step3 ”选择 “图 像 热 区 ”元件 ,绘制 一 个 宽 高 为 70 像素 和 44 像素 的 热 区 ,放置 在 定位 
图 标 上 ,如 图 7-57 所 示 。 

Step4 ”导入 “ 地 图 模 态 视 图 . png”, 将 其 宽 和 高 设置 为 375 像素 和 647 像素 ,覆盖 在 首 
页 上 面 ,如 图 7-58 所 示 。 

Step5 ”将 地 图 模 态 视图 转换 为 动态 面板 .命名 为 “地 图 ”。 右 击 该 动态 面板 ,在 弹出 的 
快捷 菜单 中 选择 “设置 隐藏 ”命令 。 

Step6 ”选中 定位 图 标 上 的 热 区 ,在 检查 器 中 选择 “属性 ”面板 ,双击 “鼠标 单 击 时 ”选项 ， 
如 图 7-59 所 示 , 打 开 “ 用 例 编辑 器 ”面板 。 
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才 
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图 7-56 首页 背景 图 7-57 创建 热 区 


ze~noo 国 > 


3 
( 属 侨 郊区 名 次 


wh<rgs<c-oenowozsrxrec- 


图 7-58 地 图 模 态 视图 图 7-59 检查 器 的 “属性 ”面板 
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Step7 ”在 “用 例 编辑 器 "对话 框 中 ,第 二 步 选择 “显示 ”, 第 四 步 勾 选 “ 地 图 (动态 面板 )”， 
设置 “动画 ”为 “向 左 滑动 ”, 具 体 设置 如 图 7-60 所 示 。 
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启用 民用 要 于 顶层 
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图 7-60 设置 定位 图 标 用 例 


Step8 ”打开 “状态 1" 里 的 地 图 图 片 , 在 “确定 ”按钮 上 新 建 一 个 热 区 ,如 图 7-61 所 示 。 
Step9 ”为 新 的 热 区 设置 鼠标 单 击 状态 ,具体 参数 设 


置 如 图 7-62 所 示 。 
Step10 单 击 右上 角 的 加 (预览 ) 按 钮 (或 按 F5 键 )， I | 
在 浏览 器 中 预览 交互 效果 。 
(2) 实现 焦点 图 切换 效果 。 图 7-61 为 “确定 ”按钮 新 建 热 区 
制作 焦点 图 切换 效果 ,可 以 直接 使 用 第 6 章 的 案例 素材 ,如 图 7-63 所 示 。 然 后 将 素材 
中 的 图 片 替换 为 焦点 图 素材 图 片 即 可 ,具体 操作 步骤 如 下 。 

Stepl 将 “焦点 图 切换 ”文件 直接 复制 到 “高 保 真 原型 模板 ”文件 的 首页 中 ,在 大纲” 面 
板 中 将 “地 图 (动态 面板 )” 调 至 最 上 层 , 如 图 7-64 所 示 。 单 击 其 右 侧 的 回 (隐藏 ) 
按钮 ,隐藏 “地 图 (动态 面板 )”。 

Step2 ”选中 焦点 图 动态 面板 ,设置 高 度 为 200 像素 。 

Step3 在“ 大纲 ”面板 中 选择 tu 面板 .双击 “状态 1” 的 图 片 ,进入 图 片 编辑 面板 ,将 图 片 
尺寸 设置 为 375 像素 X200 像素 .然后 更 换 图 片 ,如 图 7-65 所 示 。 

Step4 ”按照 Step3 的 方法 更 换 “ 状 态 2”" 和 “状态 3” 的 图 片 ,返回 首页 ,此 时 焦点 图 效果 
如 图 7-66 所 示 。 

Step5 单 击 右上 角 的 国 ( 预 览 ) 按 钮 (或 按 F5 键 ) ,在 浏览 器 中 预览 交互 效果 。 

(3) 实现 页 面 跳 转 效果 。 

对 于 首页 中 没有 特殊 状态 的 跳 转 链接 , 均 可 以 用 为 “图 像 热 区 ”元 件 设置 跳 转 链接 的 方 

法 实现 ,需要 注意 的 是 ,界面 中 可 点 击 的 区 域 要 不 小 于 44 像素 。 
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图 7-62 设置 “确定 ”按钮 用 例 
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图 7-65 更 换 图 片 
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图 7-66 更 换 图 片 后 的 焦点 图 效果 


Step1 ”打开 “高 保 真 原型 模板 "文件 ,在 “首页 "下 新 建 子 页 面 ,如 图 7-67 所 示 。 
Step2 ”以 子 页 面 作为 跳 转 页 面 ,在 页 面 内 部 填充 相应 的 页 面 或 替代 图 片 。 
Step3 ”在 “消息 "图标 上 创建 图 像 热 区 ,如 图 7-68 所 示 。 


图 7-67 新 建 子 页 面 图 7-68 在 “消息 ”图标 上 图 像 热 区 


Step4 在 右 侧 的 “属性 ?面板 中 双击 “鼠标 单 击 时 ,打开 * 用 例 编辑 器 "对 话 框 ,设置 “ 打 
开 链 接 ” 为 “我 的 消息 ”页 面 .如 图 7-69 所 示 , 单 击 * 确 定 ” 按 钮 ,完成 设置 。 


侣 管 二 到 外 EURL 或 本 过 文件 如 : eWOoxLayi 
ER Sn 

〇 重新 加 载 当 前 页 面 ( 对 变量 的 修改 将 起 作用 ) 
〇 拓 辐 前 一 现 ( 对 安 量 的 修改 检 不 所作 用 ) 


(|) 


图 7-69 设置 “打开 链接 ”为 “我 的 消息 "页面 
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Step5 ”双击 “我 的 消息 ”页 面 ,在 返回 图 标 上 创建 图 像 热 区 ,如 图 7-70 所 示 。 


我 的 消息 


图 7-70 在 返回 图 标 上 创建 图 像 热 区 


Step6 ”双击 “鼠标 单 击 时 ”, 打 开 * 用 例 编 辑 器 "对话 框 ,设置 “打开 链接 ”为 “返回 前 一 
页 ”, 如 图 7-71 所 示 。 


用例 编 名 加 “各 标 单 击 时 ) | 
用 例 名 称 月 941 委 供 于 秆 


这 接 到 四 训 URL 或 志 拉 文件 如 ; eay 
天 上 过 | 近 汪 
口 于 Wic 胡 关 的 FE ( 对 区 最 的 修改 构 杞 作用 ) 
二 近 回 前 一 页 ( 对 计量 的 个 沪 将 不 所作 用 ) 


六 证 ]| 尿 少 | 


图 7-71 设置 “打开 链接 "为 “返回 前 一 页 ” 
Step7 ”按照 Step3 一 Step6 的 方法 ,分别 为 “优惠 充值 “积分 商城 “洗车 卡 " 和 “加 入 我 
们 ”设置 “返回 前 一 页 ” 转 到 的 相应 页 面 和 返回 前 一 页 动作 。 
Step8 在 图 7-72 所 示 的 位 置 添加 “点 击 洗车 ”按钮 。 


图 7-72 添加 “点 击 洗车 "按钮 


Step9 ”选中 “点 击 洗车 ”按钮 ,在 “属性 ”面板 中 单 击 “ 和 鼠标 按键 按 下 时 ”, 在 弹出 的 “交互 
样式 ”面板 中 设置 图 像样 式 , 如 图 7-73 所 示 。 
Step10 ”为 “点 击 洗车 "按钮 添加 跳 转 链接 。 


zz73- 
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交互 寿 式 基 
RE 和 He Ba Go 

交互 样式 

下 忌 坏 县 停 时 Er Demue <: 

多 旋 坛 榨 刍 棕 下 对 

注 局 < 

区 是 同 3 引 Al ~ 


图 7-73 设置 鼠标 按键 按 下 时 的 图 像样 式 


(4) 实现 标签 栏 切 换 效果 。 

Stepl 按 Ctrl 十 A 组 合 键 选中 首页 中 的 所 有 内 容 , 按 Ctrl 十 X 组合 键 执行 剪 切 操作 。 

Step2 ”在 首页 中 新 建 一 个 尺寸 为 375 像素 X647 像素 的 动态 面板 ,将 首页 的 所 有 内 容 
粘贴 ( 按 Ctrl 十 V 组 合 键 ) 到 “状态 1” 中 ,如 图 7-74 所 示 。 

Step3 ” 回 到 首页 ,将 “首页 “订单 “我 的 ”3 个 图 标 导入 首页 中 ,在 检查 器 中 ,将 3 个 图 
像 分 别 命名 为 “首页 “订单 “我 的 ”, 如 图 7-75 所 示 。 


和 
a 
加 
回 图 回 


Er 合 国 名 


前 开 订单 RS 


图 7-74 新 建 动态 面板 图 7-75 导入 图 标 


Step4 ”双击 检查 器 ,打开 “动态 面板 状态 管理 "对话 框 ,新 增 两 个 状态 ,并 将 3 个 状态 分 
别 命名 为 “首页 图 “订单 图 “我 的 图 ”, 如 图 7-76 所 示 。 


及 动态 面板 状态 管理 


图 7-76 “动态 面板 状态 管理 "对话 框 


Steps 
Step6 


Step7 


Step8 
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在 “订单 图 ”和 “我 的 图 ”中 填充 图 片 素材 。 

选中 “首页 “订单 “我 的 ”3 个 图 标 ,在 “样式 ”面板 中 设置 “不 透明 度 ” 为 50%， 
如 图 7-77 所 示 。 i 证 

在 “属性 ?面板 中 ,设置 “选中 ”时 的 交互 样式 , 设 ms | 
置 “不 透明 度 ” 为 100%。 

选中 “首页 "图标, 双击 “鼠标 单 击 时 ”, 打 开 “ 用 
例 编辑 器 "对话 框 。 设 置 新 增 动作 为 “选中 ”, 目 图 7-77 设置 不 透明 度 
标 为 “首页 (图 像 )”, 如 图 7-78 所 示 。 设 置 新 增 

动作 为 “设置 面板 状态 ”, 设 置 “选择 状态 ”为 “首页 图 ”, 如 图 7-79 所 示 。 


不 寺中 度 50 |% 


证 用 例 编辑 妥 ( 良 标 单 击 时 ) 


4 同 dim (He) 
m3) 
I ms) 


图 7-78 设置 “选中 ”动作 


名 用 例 编辑 器 ( 良 标 单 击 时 ) 对 


人 
第 三 步 : 姐 织 动作 复 四 步 : 配置 动作 


GPE 二 要 妈 辕 状态 的 动 态 醒 板 
多 设 是 二 去 值 首页 = 真 E23 


RR | 


GET 


四 


同 sm (ME) 
ues) 


下 


图 7-79 设置 “设置 面板 状态 ”动作 
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Step9 按照 Step8 的 方法 ,分 别 为 “订单 ”和 “我 的 ”添加 “选中 ”和 “设置 面板 状态 ” 
动作 。 

Step10 ”在 空白 处 单 击 , 回 到 首页 。 在 “页 面 载 入 时 ”的 “用 例 1” 下 面 添加 页 面 载 和 时 的 
“选中 ”动作 ,如 图 7-80 所 示 。 


TE 了 四 
用 NE 和 m1 Ss 
商 一 步 , 吉 直 新 于 动作 = :EM me + REE 
光 辽 要 设置 所 运 志 的 元 什 
Es 四 
n 到 下 一 个 自动 医 环 氏 3 
六 EM5 
000 本 种 dclay frst | 和 计 
CE Cu 


图 7-80 ”页 面 载 入 时 的 “选中 ”动作 


至 此 首页 的 高 保 真 交互 效果 全 部 完成 ,双击 “模板 原型 "页 面 , 按 F5 键 预览 ,效果 如 
图 7-81 所 示 。 


图 7-81 首页 高 保 真 交互 效果 
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在 图 7-81 所 示 的 首页 高 保 真 交互 页 面 中 ,具备 了 页 面 跳 转 、 返 回 、 模 态 视图 滑 出 、 焦 点 
图 切换 ,标签 栏 切 换 等 交互 效果 (具体 效果 可 查看 本 书 案例 源 文件 ) 。 


2. 洗刷 刷 App“ 积 分 商城 "页面 交互 效果 分 析 


“积分 商城 ”页 面 的 交互 效果 和 首页 基本 类 似 .差异 在 于 “积分 商城 ”页面 较 长 ,只 能 呈现 
部 分 页 面 ,如 图 7-82 所 示 。 通 常 在 手机 中 ,对 于 内 容 较 长 的 页 面 可 以 通过 拖 动 查看 页 面 的 
其 余 内 容 , 因 此 在 “积分 商城 ?中 ,可 以 为 页 面 添加 一 个 上 下 滑动 的 效果 。 

“积分 商城 "页 面 滑动 效果 的 实现 非常 简单 ,首先 使 用 动态 面板 创建 一 个 和 手机 界面 大 
小 一 致 的 可 视 区 域 , 然 后 在 状态 中 添加 “积分 商城 "页面 效 果 , 最 后 添加 “ 拖 动 动态 面板 ”用例 
即 可 .“ 积 分 商城 页面 的 结构 图 如 图 7-83 所 示 。 


可 视 区 域 


页 面 


图 7-82 “积分 商城 "页面 


阶段 案例 :“ 积 分 商城 "页面 上 下 滑动 效果 


接 下 来 ,根据 前 面 的 案例 分 析 ,实现 “积分 商城 "页 面 的 滑动 效果 ,具体 步骤 如 下 。 

Stepl 打开“ 高保 真 原型 模板 ”素材 ,双击 “积分 商城 ”进入 该 页 面 , 剪 切 ( 按 Ctrl 十 X 组 
合 键 ) 页 面 中 的 内 容 。 

Step2 新建 一 个 尺寸 为 375 像素 X647 像素 的 动态 面板 ,命名 为 “屏幕 ”, 将 Stepl 剪 切 
的 内 容 粘 贴 到 “状态 1” 中 。 

Step3 ”选中 “屏幕 ”动态 面板 .在 “属性 ”面板 中 双击 “ 拖 动 动态 面板 时 ”, 打 开 “ 用 例 编辑 
器 "对话 框 ,设置 动作 为 “移动 ”. 勾 选 方 框 标示 的 内 容 , 设 置 “ 移 动 ”为 “ 沿 y 轴 拖 
动 ”, 如 图 7-84 所 示 。 
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图 7-84 配置 动作 
Step4 单 击 图 7-84 中 的 “添加 边 


”, 会 出 现 如 图 7-85 所 示 的 下 拉 列 表 框 和 文本 框 。 
设置 “ 顶 ” 小 于 或 等 于 (<<)0。 


边界 添加 边界 
页 [< 


-Io x 


图 7-85 添加 边界 


Step5 再 次 单 击 “ 添 加 边界 ”, 然 后 单 击 文本 框 右 侧 的 fx 按钮 ,打开 “编辑 值 " 对 话 框 ， 
两 次 单 击 “ 新 增 局 部 变量 ”, 添 加 两 个 变量 ,如 图 7-86 所 示 。 


ET 一 
在 下 方 蝙 辑 区 娘 入 文字 、 播 入 变量 、 


函数 或 雪 达 式 ， 下 和 耳 包 围 变量 名 称 或 表达 式 例如 : 
[OnLoagvaraolel 人 为 过量.Onkoadarable 的 当 和 A VarBJ 返 回 值 为 VarA+ WA 
UPageName] 返回 值 为 当前 页 面 名 


适 信 变量 、 必 性 、 苗 数 或 去 符 符 _ 


局 部 变量 

在 上 出 创建 用 于 插入 元 件 值 的 局 部 变量 变量 外 必须 是 字母 和 数字 , 且 不 包 会 空格 

白兰 局 部 去 呈 

[ivart = | 元件 文字 IE -Xx 
[varz = | 元 件 文字 了 目标 元 件 -Xx 


图 7-86 新 增 局 部 变量 
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Step6” 按 如 图 7-87 所 示 设 置 这 两 个 局 部 变量 的 参数 。 


3 -| 号 ] ~ 
元 件 | 了 | 加 I 


LVAR1 


LVAR2 


图 7-87 设置 局 部 变量 参数 


Step7 在 “插入 变量 、 属 性、 函数 或 运算 符 ” 下 面 的 多 行文 本 框 中 插入 公式 [[LVAR1. 
Height 一 LVAR2. Height]], 其 中 LVAR1. Height 表示 屏幕 宽度 ,LVAR2. Height 
表示 图 片 宽度 ,如 图 7-88 所 示 。 单 击 “ 确 定 ” 按 钮 返回 “用 例 编辑 器 "对话 框 。 

Step8 ”在 “用 例 编 辑 器 ”对 话 框 中 ,将 第 二 行 的 符号 改 为 三 (大 于 或 等 于 ), 如 图 7-89 
所 示 。 


插入 弃 最 、 属 性、 天数 或 运算 罕 。 


YARI Hei eht-LVARZ. Heieht 
页 可 [E 引 [6 fx x 
顶 -l= | ULVWAR1. fx 其 


图 7-88 插入 公式 图 7-89 修改 符号 


至 此 屏幕 拖 动 效 果 制 作 完 成 ,可 以 在 模板 原型 界面 预览 所 有 交互 效果 。 


7.2.6 在 真实 移动 设备 中 预览 高 保 真 原型 图 


除了 使 用 高 保 真 原型 模板 进行 演示 外 ,还 可 以 通过 真实 手机 演示 高 保 真 原型 图 ,让 用 户 
获得 最 真实 的 体验 效果 。 由 于 移动 设备 型 号 和 屏幕 尺寸 种 类 较 多 ,因此 在 使 用 真实 设备 预 
览 高 保 真 原型 图 时 ,应 该 计划 好 原型 尺寸 。 例 如 ,洗刷 刷 App 的 高 保 真 原型 图 就 是 以 
iPhone 6/7/8 设备 为 平台 

除了 匹配 移动 设备 ,在 进行 演示 时 ,还 需要 登录 Axure 账号 (免费 注册 ) ,通过 发 布 和 分 
享 链接 的 方式 在 移动 设备 上 预览 。 


阶段 案例 : 在 移动 设备 上 预览 洗刷 刷 App 高 保 真 原型 图 


本 案例 将 演示 使 用 移动 设备 预览 洗刷 刷 App 高 保 真 原型 图 ,具体 操作 步 又 如 下 。 
Stepl 打开“ 高保 真 原型 模板 ”文件 ,删除 “模板 原型 "页 面 ,如 图 7-90 所 示 。 


[TS 
4 首页 

D 我 的 消息 

口 人 和 充值 

口 积分 高 央 

D 洗车 卡 

D 加 入 我 们 

口 洗车 服务 列表 


所 有 元 件 库 


图 7-90 删除 “模板 原型 "页 面 
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Step2 ”执行 “发 布 ">“ 生 成 源 文 件 ” 菜 单 命 令 ( 或 按 F8 键 ) ,打开 * 生 成 HTML? 对 话 框 , 选 
择 “ 手 机 /移动 设备 ”选项 ,按照 图 7-91 所 示 进 行 设置 。 其 中 主屏 幕 图 标 为 在 手机 
界面 生成 的 启动 图 标 ,直接 导入 素材 即 可 。 单 击 “ 生 成 "按钮, 即 可 生成 预览 文件 。 


FET > 


手 Hu/ 移动 设备 
妆 规 
页 面 后 包 会 视图 接口 标记 
页 面 注释 宽度 (px 或 device-width) device-width 
元 件 说 明 高 度 (px 或 device-height) 
交互 初始 比例 (0- 100) 10 
ee 最 小 比例 (0-100) 
Web 字体 
最 大 比例 (0- 10.0) 
站 用 户 可 油 (no 或 blank0 
en | me oe 
高 有 门 防止 委 直 页 面 滚动 ( 受 担 弹性 注 动 ) 
讨论 EEC 
主屏 幕 图 标 (推荐 114x114 像 素 png) 
图 号 和 | | WS 
| 
10S 屏 基 启动 画面 
iPhone iPad iPad 横 放 
320x460px png 768x1004px png 748x1024px png 
A SA SA 
2 
后 隐藏 刘 澳 吉 号 乓 ( 当 从 0S 主屏 莫 启 动 时 ) 


1OS 状态 栏 样式 。 defaut 
(default、 black 或 blacktranslucent) 


图 7-91 生成 预览 文件 


Step3 ”在 主 工具 栏 中 单 击发 布 按钮 (或 按 F6 键 ) ,打开 “发 布 到 AxShare” 对 话 框 ,可 以 
选择 “创建 新 项 目 ” 或 “替换 现 有 原型 项 目 ” 单 选 按钮 (第 一 次 发 布 只 能 创建 新 项 
目 ) ,如 图 7-92 所 示 , 然 后 单 击 “ 发 布 ”按钮 。 


〇 莹 洲 现 有 原型 项 目 


项 目 ID SHeMON 


[六 ][ a ] 
图 7-92 “发 布 到 AxShare” 对 话 框 
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Step4 ”发 布 成 功 后 ,会 生成 链接 , 单 击 copy 按钮 复制 链接 ,如 图 7-93 所 示 。 用 手机 中 
的 Safari 浏览 器 打开 链接 即 可 。 


Publishing to kzure Share 
Your Axure Share link is- 


https /hemOn.axshare com copy 
加 不 基站 点 地 加 


您 可 以 在 继续 使 用 Axure RFB9Ed 友 布 = 


Generation Successful 


7-93 复制 链接 


Step5 ”在 手机 上 点 击 Safari 浏览 器 底部 的 外 图 标 ,再 选择 * 添 加 到 主屏 幕 ”在 手机 桌 
面 上 就 会 显示 之 前 上 传 的 洗刷 刷 App 首页 图 标 , 如 图 7-94 所 示 。 此 时 就 可 以 
和 正常 安装 的 App 一 样 ,点 击 该 图 标 浏览 高 保 真 原型 图 。 


图 7-94 洗刷 刷 App 首页 图 标 


学 习 目 标 

。 了 解 产 品 迭 代 的 概念 。 

。 熟悉 产品 迭代 的 流程 。 

。 掌握 网 页 的 设计 规范 ,能 够 设计 网 页 。 

当 产 品 进入 成 熟 期 后 ,产品 迭代 就 变 得 非常 重要 。 定 期 进行 产品 迭代 ,能 够 让 产品 领先 
于 市 场 同类 竞 品 , 挖 掘 新 的 到 利 模式 .始终 保持 产品 鲜 活 的 生命 力 。 然 而 什么 是 产品 兴 代 ? 
产品 迭代 流程 有 哪些 ? 产品 经 理 需要 在 产品 迭代 过 程 中 思考 哪些 问题 ? 本 章 将 对 产品 迭代 
的 相关 知识 做 具体 讲解 。 


8.1 产品 迭代 概述 


任何 产品 都 会 经 历 产品 的 初创 期 成 长 期 成熟 期 和 衰退 期 4 个 阶段 ,如 图 8-1 所 示 。 


需求 量 


0 ”初创 期 成 长 期 成 熟 其 衰退 期 
时 间 
图 8-1 产品 周期 
产品 选 代 是 保证 初创 期 的 快速 上 线 .成 长 期 的 高 速 增长 ` 成 熟 期 的 稳定 营 收 和 衰退 期 的 
创新 突破 的 有 效 手段 。 本 节 将 对 产品 迭代 的 定义 和 流程 做 简要 介绍 。 
8.1.1 什么 是 产品 迭代 


产品 迭代 简单 来 说 就 是 产品 的 多 次 更 新 换代 。 在 互联 网 产品 设计 中 ,产品 迭代 可 以 从 
两 个 层面 来 看 ,一 个 是 产品 自身 功能 层面 的 选 代 , 另 一 个 是 产品 层面 的 选 代 , 具 体 介 绍 如 下 。 
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1. 功能 层面 


从 功能 层面 来 说 ,产品 迭代 就 是 一 定时 间 内 在 产品 原 有 版 本 上 对 产品 功能 进行 更 新 ,并 
发 布 更 新 版 本 。 

例如 ,对 手机 产品 进行 功能 划分 ,第 一 阶段 (Po) 的 功能 ( 即 核心 功能 ) 是 打 电话 和 发 消 
息 , 第 二 阶段 (P1) 的 功能 是 看 视频 、 听 音乐 ,第 三 阶段 (P2) 的 功能 是 上 网 、 购 物 ,如 图 8-2 所 
示 。 在 产品 实现 过 程 中 ,可 以 根据 产品 功能 的 优先 级 , 先 实现 核心 功能 (P0) ,发 布 产品 ; 然 
后 再 实现 产品 的 第 二 阶段 和 第 三 阶段 功能 (Pl 和 P2) ,更 新 产品 ,这 个 过 程 就 是 产品 迭代 。 


P0: 打 电话 ， 发 短信 


P1: 看 视频 、 听 音乐 


P2: 上 网 、 购 物 


图 8-2 产品 功能 划分 


2. 产品 层面 

从 产品 层面 来 说 ,产品 迭代 就 是 为 了 形成 比 同类 产品 更 大 的 优势 而 进行 的 前 瞻 性 转型 
或 升级 (这 种 转型 或 升级 可 能 是 在 当前 产品 的 基础 上 形成 一 条 新 的 产品 线 ) 。 由 于 互联 网 环 
境 的 不 确定 性 ,导致 互联 网 产品 的 需求 很 难 把 握 , 决 策 层 也 很 难看 到 可 预期 的 未 来 。 因 此 ， 
今天 的 互联 网 产品 不 再 是 一 个 火箭 发 射 式 的 过 程 ,而 是 一 个 不 断 探索 的 过 程 。 通 过 子 产品 
的 不 断 渗透 ,找到 产品 方向 ,已 成 为 更 多 公司 的 选择 。 产 品 体系 也 由 原来 的 Al 一 A2 一 A3， 
演变 为 A1. 1、Al. 2、A1l. 3, 再 根据 分 析 调 研 演变 为 B 产品 ,如 图 8-3 所 示 。 


A3 Al1.1 
火箭 式 个。 渗透 式 
产品 A2 产品 A< Al1.2 
迭代 人 迭代 
Al A1l3 = B 


图 8-3 产品 迭代 示意 


在 图 8-3 中 ,产品 A 到 B 的 演变 让 产品 选取 最 优 方向 的 思路 有 了 本 质 的 改变 。 此 时 产 
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品 和 迭代 的 目的 就 是 要 让 产品 做 到 人 无 我 有 .人 有 我 优 ,避免 和 别人 陷 人 同等 水 平 的 竞争 关 
系 。 例 如 ,我 们 的 产品 和 竞争 对 手 的 产品 虽然 是 同一 款 产 品 ,但 是 我 们 的 服务 比 竞争 对 手 
好 ; 当 竞 争 对 手 的 服务 水 平 上 来 以 后 ,我 们 的 速度 比 竞争 对 手 快 ; 当 竞争 对 手 的 速度 上 来 之 
后 ,我 们 的 产品 再 次 升级 。 这 就 是 产品 宏观 层面 的 迭代 。 


8.1.2 产品 迭代 流程 

无 论 是 功能 层面 还 是 产品 层面 ,产品 选 代 流 程 都 是 一 定 的 ,包括 选 代 调 研 、 需 求 分 析 与 
评估 ,设计 与 开发 .需求 测试 .产品 上 线 5 个 阶段 ,具体 介绍 如 下 。 

1. 迭代 调研 

迭代 调研 的 目的 主要 是 收集 上 线 产品 新 的 需求 。 调 研 的 方向 主要 包括 产品 的 漏洞 .用 


户 反馈 的 问题 .同类 产品 的 新 功能 、 市 场 变动 的 新 方向 。 产 品 经 理 需 要 将 搜集 到 的 产品 需求 
整理 到 项 目 需求 管理 文档 中 。 图 8-4 是 一 个 简单 的 项 目 需求 管理 文档 。 


记录 人 时 间 搜集 渠道 


图 8-4 一 个 简单 的 项 目 需求 管理 文档 
注意 : 在 迭代 调研 阶段 ,不 要 将 不 明确 的 需求 记录 到 项 目 需求 管理 文档 中 。 
2. 需求 分 析 与 评估 


在 需求 分 析 阶 段 ,产品 经 理 需 要 根据 产品 的 迭代 周期 ,确认 本 次 产品 迭代 的 需求 ,并 将 
需求 按照 级 别 排 序 ,一 般 分 为 P0、P1、P2 这 3 级 即 可 。 图 8-5 为 产品 需求 级 别 表 。 


X-X-X 版 本 产品 需求 级 别 
P0 (高 ) 
P1( 中 ) 
P2 ( 低 ) 
记录 人 : 


图 8-5 产品 需求 级 别 表 


需要 注意 的 是 ,需求 的 形式 是 多 种 多 样 的 ,在 不 同 的 阶段 ,产品 需求 的 优先 级 也 是 不 一 
样 的 ,具体 情况 要 根据 产品 的 生命 周期 而 定 。 例 如 ,在 产品 早期 应 更 多 关注 业务 流程 的 需 
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求 , 优 先 保证 日 常 使 用 流程 的 稳定 和 安全 。 

当 通 过 分 析 得 出 需求 级 别 之 后 ,就 需要 召开 技术 部 门 的 需求 评估 会 议 ,对 已 有 的 需求 从 
技术 角度 进行 评估 。 涉 及 的 评估 维度 可 参考 开发 周期 、 开 发 难度 .团队 技术 储备 等 ,最 后 得 
出 开发 成 本 级 别 。 通 常 开发 成 本 级 别 用 DO、D1、D2 表示 。 图 8-6 为 产品 开发 成 本 级 别 表 。 


图 8-6 产品 开发 成 本 级 别 表 


在 需求 评估 会 议 中 ,可 以 握 弃 一 些 开 发 负担 较 重 、 级 别 较 低 的 需求 。 至 此 ,产品 经 理 就 
可 以 根据 产品 需求 级 别 表 和 产品 开发 成 本 级 别 表 将 已 确定 的 需求 填写 到 需求 评估 和 矩阵 模型 
中 ,如 图 8-7 所 示 。 


图 8-7 需求 评估 和 矩阵 模型 


产品 经 理 可 以 根据 需求 评估 矩阵 模型 ,撰写 包含 需求 功能 和 开发 成 本 的 产品 版 本 优化 
申请 , 交 给 上 级 领导 确认 。 


3. 设计 与 开发 


设计 与 开发 是 一 个 至 关 重 要 的 环节 ,直接 决定 本 迭代 周期 内 的 产品 迭代 能 否 成 功 。 在 
上 一 个 阶段 , 即 需求 分 析 与 评估 阶段 ,产品 团队 已 经 确定 了 最 终 的 开发 内 容 , 但 这 并 不 代表 
产品 选 代 进 入 这 个 阶段 以 后 ,产品 经 理 就 无 事 可 做 了 。 作 为 产品 经 理 , 在 产品 生命 周期 的 每 
一 个 阶段 都 需要 保持 活跃 。 而 这 个 阶段 产品 经 理 需 要 做 的 就 是 跟 进 产品 的 设计 、 开 发 进度 ， 
以 保证 产品 能 够 在 预定 的 期 限 内 开发 完成 ,达到 可 测试 水 平 。 


4. 需求 测试 


在 需求 测试 阶段 ,开发 团队 要 将 本 和 迭代 周期 内 开发 完成 的 需求 全 部 提交 测试 。 需 求 测 
试 分 为 两 部 分 : 第 一 部 分 是 产品 经 理 自 测 整体 逻辑 ,也 就 是 说 不 需要 关注 产品 细节 问题 (如 
界面 美观 度 等 ) ,只 要 产品 在 整体 逻辑 上 没有 问题 ,此 部 分 测试 便 可 通过 ;第 二 部 分 是 提交 测 
试 人 员 进 行 需求 落地 的 测试 ,在 该 阶段 产品 经 理 需 要 跟 进 测 试 进 度 , 在 测试 人 员 对 内 容 和 让 
辑 有 疑问 时 ,产品 经 理 需 要 及 时 解答 。 


上 
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5. 产品 上 线 


当 需 求 测试 工作 全 部 完成 后 , 即 意味 着 本 迁 代 周期 内 需要 开发 的 需求 已 经 全 部 实现 , 且 
没有 任何 问题 ,这 时 产品 就 可 以 上 线 了 。 上 线 后 ,产品 经 理 还 需要 进行 一 次 线 上 回 测 ,最 大 
限度 地 确保 产品 不 存在 任何 问题 。 如 果 不 幸 测试 出 了 在 需求 测试 阶段 未 能 发 现 的 问题 , 产 
品 经 理 一 定 要 在 第 一 时 间 通 知 技术 团队 去 修复 ,未 能 修复 的 问题 也 需要 告知 运营 团队 ,并 协 
助 运营 团队 做 好 对 用 户 的 解释 与 安抚 工作 。 产 品 上 线 标志 着 一 个 迭代 周期 的 结束 ,同时 也 
意味 着 产品 经 理 需 要 开始 梳理 下 一 个 迭代 周期 的 内 容 。 

总 的 来 说 ,在 产品 选 代 流 程 中 ,产品 经 理 的 重点 工作 主要 集中 在 选 代 调 研 和 需求 分 析 与 
评估 两 个 阶段 ,产品 经 理 需 要 在 这 两 个 阶段 对 需求 进行 准确 的 把 握 和 取舍 ,找到 产品 最 优 的 
迭代 方案 。 


8.2 网 页 结构 和 布局 


本 节 主 要 介绍 网 页 的 结构 ,布局 以 及 相应 的 设计 规范 。 
1. 网 页 结构 


虽然 网 页 的 表现 形式 千变万化 ,但 大 部 分 网 页 的 基本 结构 是 相同 的 。 网 页 的 基本 结构 
包含 引导 栏 .标题 (header) ,导航 栏 ,横幅 (banner) 内容 区 ,版 权 信息 这 几 个 模块 ,如 图 8-8 
所 示 。 

对 图 8-8 所 示 的 网 页 基本 结构 具体 介绍 如 下 : 

(1) 网 页 宽度 一 般 为 1200 一 1920 像素 ,高 度 可 根据 内 容 设 定 。 

(2) 版 心 指 的 是 网 页 的 有 效 使 用 区 域 ,是 主要 元 素 以 及 内 容 所 在 的 区 域 。 版 心 宽度 一 
般 为 1000 一 1400 像素 。 

(3) 引导 栏 位 于 网 页 的 顶部 ,通常 用 来 放置 客服 电话 、 帮 助 中 心 .注册 和 登录 等 信息 ,高 
度 一 般 为 35 一 50 像素 。 

(4) 标题 位 于 引导 栏 正 下 方 ,主要 放置 企业 标志 等 内 容 信息 。 高 度 一 般 为 80 一 100 像 
素 。 导 航 栏 是 网 站 子 页 面 人 口 的 集合 区 域 ,相当 于 网 站 的 菜单 。 导 航 栏 高 度 一 般 为 40 一 60 
像素 。 目 前 的 流行 趋势 是 将 header 和 导航 合并 放置 在 一 起 ,高 度 一 般 为 85 一 130 像素 。 

(5) 横幅 是 网 站 中 最 主要 的 广告 形式 。 横 幅 将 文字 信息 图 片 化 ,以 更 直观 的 方式 进行 
展示 ,从 而 提高 页 面 转化 率 。 横 幅 高 度 通常 为 300 一 500 像素 。 

(6) 内 容 区 和 版 权 信息 高 度 不 限 , 可 根据 信息 量 进行 调整 。 内 容 区 通过 单列 布局 、 两 列 
布局 等 布局 方式 将 内 容 合理 展示 出 来 。 版 权 信息 主要 放置 一 些 公司 信息 或 者 制作 者 信息 。 


2. 网 页 布局 


网 页 布局 就 是 对 网 页 内 容 区 的 布局 进行 规划 ,对 主 次 内 容 进行 归纳 和 区 分 ,通过 布局 向 
用 户 提供 良好 的 浏览 阅读 线索 。 产 品 经 理 在 制作 网 页 产品 原型 图 时 ,需要 对 网 页 进行 简单 
的 布局 。 

下 面 介绍 一 些 常 见 的 网 页 布局 形式 。 
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[= 网 页 宽度 1200~1920 像 素 = 
版 心 宽度 1000~1400 像 素 
r SD EE 一 引导 栏 高 度 35~50 像 素 
se 一 标题 + 导航 栏 高 度 


85~100 像 素 


见 字 如 面 群星 道 嘉 横幅 高 度 300~500 像 素 
5 | 


内 容 区 高 度 不 限 


图 8-8 网 页 基本 结构 


1) 单列 布局 

单列 布局 是 指 内 容 区 不 分 块 的 一 种 布局 形式 ,如 图 8-9 所 示 。 单 列 布局 是 网 页 布局 的 
基础 ,所 有 复杂 的 布局 形式 都 是 在 此 基础 上 演变 而 来 的 。 这 种 布局 的 优点 是 阅读 更 流畅 、 济 
览 更 清晰 ,缺点 是 布局 呆板 。 

2) 两 列 布局 

两 列 布局 是 将 内 容 区 划分 为 左 、 右 两 大 块 .如 图 8-10 所 示 。 这 种 布局 的 优点 是 内 容 丰 
富 ,整体 性 强 , 并 且 可 以 将 产品 内 容 信 息 进行 直观 的 陈列 ,从 而 提高 产品 转化 率 。 

3) 三 列 布局 

三 列 布局 是 将 内 容 区 划分 为 左 、 中 、 右 三 大 块 ,如 图 8-11 所 示 。 三 列 布局 常见 于 购物 类 
网 站 。 这 种 布局 的 优点 是 页 面 充 实 、 内 容 丰 富 和 信息 量 大 ,缺点 是 页 面 拥挤 、 不 够 灵活 。 


hb 
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图 8-9 单列 布局 
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图 8-10 两 列 布局 
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图 8-11 三 列 布局 


4) 通栏 布局 

为 了 追求 版 面 上 的 美观 ,通常 将 引导 栏 、 标 题 , 导 航 栏 , 横 幅 、 版 权 信息 进行 通栏 设计 。 
这 样 ,无 论 计算 机 或 移动 设备 屏幕 有 多 大 ,这 几 个 区 域 都 能 铺 满 屏幕 。 图 8-12 就 是 将 页 面 
顶部 的 引导 栏 标 题 \, 导 航 栏 .横幅 和 页 面 底部 的 版 权 信息 进行 通栏 设计 后 的 效果 。 


I 
@ Btnm x 


让 


内 容 


版 权 信 息 


图 8-12 通栏 布局 


阶段 案例 : 洗刷 刷 App 商城 首页 开发 迭代 


1. 迭代 背景 


通过 洗刷 刷 App 第 一 阶段 的 运营 ,公司 已 经 吸引 了 一 大 批 用 户 。 根 据 公 司 高 层 的 战略 
规划 ,决定 以 洗刷 刷 App 的 积分 商城 为 基础 ,以 现 有 用 户 为 依托 ,开发 一 个 汽车 用 品类 的 网 
上 商城 。 产 品 和 迭代 调研 后 生成 的 项 目 需 求 管理 文档 如 图 8-13 所 示 。 


模块 : 积分 商城 模块 


需求 背景 : 用 户 规模 已 经 达到 最 初 的 预 央 ,根据 公司 战略 布局 实现 产品 第 二 阶段 的 开发 


需求 描述 : 以 积分 商城 为 基础 ， 以 现 有 用 户 为 依托 ， 做 一 个 汽车 用 品类 网 上 商城 


记录 人 : XXX 时 间 :XXXX 年 XX 月 XX 日 “| 搜集 渠道 : 公司 高 层 


图 8-13 ”积分 商城 模块 产品 迭代 项 目 需求 管理 文档 


图 8-13 所 示 的 项 目 需求 管理 文档 只 是 一 个 示例 。 网 上 商城 是 较 大 的 项 目 ,要 完成 网 上 
商城 项 目的 开发 ,还 需要 产品 经 理 进行 细致 的 需求 规划 ,如 顾客 在 线 注册 、 购 物 、 提 交 订 单 、 
付款 等 操作 以 及 产品 的 添加 、 删 除 查询、 订单 的 管理 ,操作 员 的 管理 .注册 用 户 的 管理 等 后 
台 操 作 。 
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2. 网 页 版 洗刷 刷 商城 网 站 首页 原型 图 


下 面 以 洗刷 刷 商城 网 站 首页 原型 图 为 例 , 介 绍 产品 选 代 开发 的 步骤 。 

1) 案例 分 析 

通过 案例 分 析 可 以 快速 理 清 制 作 思路 ,完成 案例 的 制作 。 洗 刷 刷 App 积分 商城 的 结构 
和 网 站 有 着 本 质 的 差异 ,图 8-14 为 洗刷 刷 App 的 结构 和 原型 图 ,图 8-15 为 洗刷 刷 商城 首页 


原型 图 的 部 分 截图 。 
TREE 
ME 
商城 banner 
R2000 免 换 记录 
内 容 区 域 时 网 二 
2 虽 了 6 3 A 
优 于 礼券 超 值 礼品 所 有 商品 
标 等 栏 工 内 栏 


图 8-14 洗刷 刷 App 积分 商城 的 结构 和 原型 图 


通过 对 比 图 8-14 和 图 8-15 可 以 看 出 ,洗刷 刷 App 积分 商城 多 出 了 状态 栏 和 底部 的 标 
签 栏 。 在 制作 网 站 时 ,要 把 这 些 模块 握 弃 ,按照 网 站 的 基本 结构 一 一 引导 栏 、 标 题 . 导 航 栏 、 
横幅 ` 内 容 区 和 版 权 信息 搭建 原型 图 。 

(1) 引导 栏 。 在 电 商 网 站 中 ,引导 栏 一 般 用 于 放置 登录 注册、 订单 个 人 中 心 等 。 在 制 
作 引 导 栏 模块 原型 时 ,可 以 根据 商城 的 特点 ,添加 一 些 有 特色 的 功能 模块 ,具体 可 以 参照 前 
面 章 节 产 品 的 实现 流程 ,这 里 不 再 袭 述 。 洗 刷 刷 商城 根据 自身 特点 可 以 添加 定位 、 登 录 、 注 
册 、 订 单 . 个 人 中 心 、 洗 车 App、 帮 助 中 心 等 功能 。 

(2) 标题 和 导航 栏 。 洗 刷 刷 商城 是 以 积分 商城 为 基础 的 一 个 汽车 用 品类 网 上 商城 , 因 
此 在 保留 积分 商城 模块 的 同时 ,还 要 增加 一 些 新 的 模块 ,如 电 商 常见 的 抢购 .品牌 人 驻 以 及 
专题 活动 等 。 

同时 ,还 可 以 参考 其 他 电 商 常用 的 商品 分 类 导航 方法 ,对 商品 进行 细 分 ,如 维修 保养 、 车 
载 电器 、 装 饰 ,汽车 美容 等 。 

(3) 内 容 区 。 在 内 容 区 可 以 根据 商品 的 分 类 导航 展示 对 应 的 商品 和 服务 。 

(4) 版 权 信息 。 在 电 商 网 站 中 ,版 权 信息 部 分 一 般 放置 服务 、 推 广 等 内 容 , 在 洗刷 刷 商 
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图 8-15 ”洗刷 刷 商城 网 站 首页 原型 图 的 部 分 截图 


城中 主要 放置 4 个 部 分 : 客户 服务 .关注 我 们 .下 载 洗 车 App 和 服务 热线 。 
2) 案例 实现 
Stepl 打开 Axure 软件 ,将 Home 页 面 改名 为 “首页 ”。 
Step2 ”在 元 件 库 中 选择 “和 矩形 2”, 在 页 面 编辑 区 创建 一 个 宽度 为 1400 像素 、 高 度 为 
1200 像素 的 矩形 ,用 于 放置 网 站 页 面 ,如 图 8-16 所 示 。 


图 8-16 创建 放置 网 站 页 面 的 矩形 
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Step3 ”执行 “布局 >“ 网 格 和 辅助 线 ” 一 “创建 辅助 线 ” 命 令 , 在 弹出 的 “创建 辅助 线 ” 对 
话 框 中 ,设置 “ 列 数 ” 为 1 ,设置 “ 列 宽 ” 为 100( 表 示 在 100 像素 位 置 创建 垂直 的 
全 局 辅助 线 ) ,如 图 8-17 所 示 。 


澡 创建 辅助 线 “=| 


图 8-17 “创建 辅助 线 ? 对 话 框 


Step4 按照 Step3 的 方法 ,在 1300 像素 位 置 再 创建 一 条 垂直 的 全 局 辅助 线 , 以 确定 网 
页 版 心 (版 心 宽度 为 1200 像素 ) ,如 图 8-18 所 示 。 
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图 8-18 ”确定 网 页 版 心 


Step5 ”绘制 宽度 为 1400 像素 、 高 度 为 35 像素 的 矩形 色 块 ,作为 网 页 引导 栏 ,并 填写 文 
字 内 容 , 如 图 8-19 所 示 。 

引导 栏 左 侧 引导 栏 右 侧 

图 8-19 ”制作 引导 栏 


Step6 ”绘制 宽度 为 1400 像素 、 高 度 为 100 像素 的 矩形 色 块 ,作为 网 页 标题 和 导航 栏 ， 
并 填写 文字 内 容 , 如 图 8-20 所 示 。 
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8-20 ”制作 标题 和 导航 栏 


Step7 ”绘制 宽度 为 325 像素 、 高 度 为 365 像素 的 矩形 色 块 ,作为 商品 类 目 导航 。 制 作 
一 个 宽度 为 865 像素 .高度 为 365 像素 的 占 位 符 , 作 为 横幅 。 将 它们 放 在 一 个 
区 域 , 如 图 8-21 所 示 。 
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图 8-21 商品 类 目 导 航 和 横幅 


Step8 ”绘制 宽度 为 1200 像素 、 高 度 为 420 像素 的 矩形 色 块 ,作为 商品 内 容 展示 部 分 。 
具体 样式 如 图 8-22 所 示 。 巾 于 商品 内 容 展示 结构 基本 一 致 ,所 以 可 以 复制 几 
个 “商品 图 ”元件 , 和 商品 类 目 导航 相对 应 。 
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图 8-22 ”制作 商品 内 容 展示 部 分 


Step9 ”绘制 宽度 为 1200 像素 、 高 度 为 228 像素 的 矩形 色 块 ,作为 底部 版 权 信息 部 分 ， 
划分 为 4 个 区 域 ,并 填写 文字 内 容 , 如 图 8-23 所 示 。 


客户 服务 关注 我 们 下 者 洗车 APP 服务 热线 


图 8-23 ”底部 版 权 


Step10 ”在 “Icons 元 件 库 ”中 找到 如 图 8-24 所 示 的 图 标 , 拖 忠 到 页 面 编辑 区 中 ,在 右 侧 
的 “样式 ”面板 中 设置 “不 透明 度 ” 为 40% ,并 输入 文字 说 明 。 
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客户 服务 关注 我 们 
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Stepl1 单 击 库 面板 中 的 豆 ( 选 项 ) 按 钮 ,在 弹出 的 下 拉 菜 单 中 ,选择 “创建 元 件 库 ” 命 
令 , 如 图 8-25 所 示 ,创建 一 个 名 称 为 " 微 博 图 标 ” 的 元 件 库 。 
ER 
下 载 元 件 库 0) 


载 入 元 件 库 儿 ) 
从 hxure Share 加 载 


创 尘 元 件 库 C) 
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图 8-25 创建 元 件 库 


Step12 ”双击 图 8-26 中 的 “新 元 件 1”, 打 开 页 面 编辑 区 ,将 素材 weibo. png 拖 忠 到 页 面 


编辑 区 中 ,如 图 8-27 所 示 。 保 存 并 关闭 文件 。 
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图 8-26 ”双击 “新 元 件 1” 图 8-27 微 博 图 标 


Step13 单 击 库 面板 中 的 号 (选项 ) 按 钮 ,在 弹出 的 下 拉 菜 单 中 ,选择 “刷新 元 件 库 ” 命 
令 ,如 图 8-28 所 示 , 就 可 以 显示 创建 的 微 博 图 标 元 件 。 

Step14 ”将 微 博 图 标 元 件 拖 忠 到 页 面 编辑 区 中 ,调整 大 小 ,并 在 右 侧 的 “样式 ”面板 中 设 
置 “不 透明 度 ? 为 40% ,并 输入 文字 说 明 , 最 终 效果 如 图 8-29 所 示 。 
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刷新 元 件 库 E) 
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箱 载 元 件 库 5) 
图 8-28 刷新 元 件 库 图 8-29 微 博 图 标 元 件 
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Step15 ”添加 其 他 版 权 信息 ,完成 版 权 信息 模块 的 制作 ,如 图 8-30 所 示 。 


客户 服务 关注 我 们 下 载 洗车 APP 服务 热线 
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图 8-30 ”版 权 信息 模块 


